javascript - react : Material-UI - how to style the two item list so items will be next to each other?

Question

我有一个包含两项的列表:“标签”和“值”，这是它当前的样子:

如何将右侧的元素移动到左侧，以便它们留在标签旁边？

这是我的代码示例:

  <List>
    {details.map((item, index) =>
      <ListItem key={index} divider alignItems="flex-start">

        <ListItemIcon>
          <i className={item.icon}/>
        </ListItemIcon>

        <ListItemText className="br-break" primary={item.label} />

        <ListItemSecondaryAction>
          <ListItemText className="br-break" primary={item.data}/>
        </ListItemSecondaryAction>

      </ListItem>
    )}
  </List>

我试图删除 <ListItemSecondaryAction>标签 - 无效。

Answer 1

一种选择是使用 material-ui 样式来覆盖 ListItemText flex 值:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
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';

const useStyles = makeStyles(theme => ({
  root: {
    flex: '0.2',
    minWidth: '100px'
  },
}));

export default function ListDemo() {
  const classes = useStyles();

  const details = [
    {
      label: 'Issue Number',
      data: 'CCM-1007'
    },
    {
      label: 'Environment',
      data: 'TST'
    },
    {
      label: 'Country',
      data: 'SE'
    },
  ]

  return (
    <List>
    {details.map((item, index) =>
      <ListItem key={index} divider alignItems="flex-start">
        <ListItemIcon>
          <i className={item.icon} />
        </ListItemIcon>
        <ListItemText className={classes.root} primary={item.label} />
        <ListItemText className={classes.root} primary={item.data} />
      </ListItem>
    )}
  </List>
  );
}