How to align primary and secondary text horizontally and not vertically with Material-UI?

问题

I have this code:

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import ArrowForwardIos from '@material-ui/icons/ArrowForwardIos';
import ListSubheader from '@material-ui/core/ListSubheader';
import Switch from '@material-ui/core/Switch';
import TextField from '@material-ui/core/TextField';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import FolderIcon from '@material-ui/icons/Folder';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import DeleteIcon from '@material-ui/icons/Delete';
import IconButton from '@material-ui/core/IconButton';

function App() {
  return (
    <ListItem>
    <ListItemAvatar>
    <Avatar>
    <FolderIcon />
    </Avatar>
    </ListItemAvatar>
    <ListItemText
    primary="Single-line item"
    secondary="Secondary text"
    />
    <ListItemSecondaryAction>
    <IconButton edge="end" aria-label="delete">
    <DeleteIcon />
    </IconButton>
    </ListItemSecondaryAction>
    </ListItem>
  );
}

export default App;

"Single-line item" and "Secondary text" is vertically aligned, but I need align it horizontally. Do you have any idea how to do it?

Instead of left I need rendering on the right here:

https://gitlab.com/j4nos/tableitem/blob/master/src/App.js

How? :)

回答1:

I managed to get the desired output using a few other elements and referring the material-ui documentation. here is a working example: https://codesandbox.io/s/sweet-bose-4e26h

function App() {
  return (
    <ListItem>
      <ListItemAvatar>
        <Avatar>
          <FolderIcon />
        </Avatar>
      </ListItemAvatar>
      <Box
        textAlign="right"
        style={{ paddingRight: 5 }}
      >
        Single-line item
      </Box>
      <ListItemText
        secondaryTypographyProps={{ align: "left" }}
        secondary="Secondary text"
      />
      <ListItemSecondaryAction>
        <IconButton edge="end" aria-label="delete">
          <DeleteIcon />
        </IconButton>
      </ListItemSecondaryAction>
    </ListItem>
  );
}

来源：https://stackoverflow.com/questions/59019825/how-to-align-primary-and-secondary-text-horizontally-and-not-vertically-with-mat

标签

material-ui