Реагируйте: Material-UI - как стилизовать список из двух элементов, чтобы элементы были рядом друг с другом?

Question

У меня есть список, состоящий из двух элементов: 'label' и 'value', вот как это выглядит в настоящее время:

Как я могу перемещать предметы, которые находятся с правой стороны влево, чтобы они оставались рядом с меткой?

Это мой пример кода:

  <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

Один из вариантов - использовать стиль материала-пользовательского интерфейса для переопределения значения гибкости ListItemText:

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>
  );
}