Невозможно выровнять текст ListItem

Question

У меня есть список материалов-интерфейсов:

<List dense>
  {this.state.issues.map((item, i) => {
    return <Link target="_blank" to={item.issue_url} key={i}>
      <ListItem button>
        <ListItemText primary={item.issue_state}/>
        <ListItemSecondaryAction>
          <IconButton>
            <ArrowForward/>
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>
    </Link>
  })
  }
</List>

issue_state получено из MongoDB.Могу ли я добавить еще один столбец в мой список, показывающий другое поле из базы данных?Я попытался:

<ListItemText primary={item.issue_state}/>
<ListItemText primary={item.issue_title}/>

Это показывает, что я хочу, но тест Issue_title центрирован.Я бы хотел, чтобы он был выровнен.Можно ли это сделать?

Answer 1

Компонент

ListItemText отображается в следующем стиле CSS, который позволяет ему быть гибким для увеличения и уменьшения в соответствии с шириной и высотой его содержимого.

flex: 1 1 auto;

Его предок ListItem компонент отображается какinline-flex.AFAICT, результаты, которые вы ищете, не могут быть достигнуты без переопределения этих стилей.Не беспокойтесь, есть и другие способы, которые используют доступные API, представленные в компоненте.

Не берите в голову, что имя компонента, кажется, вводит в заблуждение, что его использование специфично для отображения текста в элементе списка.Более подробное изучение документации *1001*ListItemText API-компонента показывает, что свойство primary имеет тип node.

Это означает, что ListItemText можно использовать для рендеринга строки, функции и React.Element способом, аналогичным приведенному ниже фрагменту.

<ListItemText primary={<div>Foo<br/>Bar<br/>Baz</div>} />

Существует также свойство secondary, которое отображает элементы с текстовым акцентом.

<ListItemText primary="Foo" secondary={<div>Bar<br/>Baz</div>} />

Есливам нужно больше контроля над дочерними элементами ListItemText, API позволяет гибко писать это так:

      <ListItemText>
        <Typography variant="subheading">Foo</Typography>
        <Typography variant="body1" color="textSecondary">Bar</Typography>
        <Typography variant="body1" color="textSecondary">Baz</Typography>
      </ListItemText>