无法对齐 ListItem 文本

Question

我有这个素材-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，如果不覆盖这些样式，就无法实现您想要实现的结果。不用担心，还有其他方法可以使用组件中公开的可用 APIs。

没关系，该组件的名称似乎具有误导性，因为它的用途特定于在列表项中呈现文本。仔细看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>

无法对齐 ListItem 文本

Unable to align ListItem text

javascript

listitem

reactjs

material-ui