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。

不要介意该组件的名称似乎误导了其用法特定于呈现列表项中的文本。仔细查看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文本

1 个答案: