javascript - 无法对齐 ListItem 文本

Question

我有这个 material-ui 列表:

<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。

不要介意组件的名称似乎具有误导性，因为它的用途是特定于在列表项中呈现文本。仔细观察 ListItemText component API documentation显示 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>