Material UI - 如何制作水平列表？

Question

在 Material UI 中，我想使用：

List

和

ListItem

但让它们水平显示。

最好的方法是什么？

Answer 1

到目前为止我已经：

const flexContainer = {
  display: 'flex',
  flexDirection: 'row',
  padding: 0,
  overflow-x: 'auto' // setting overflow to auto enables horizontal scroll
};

return (
  <List style={flexContainer}>
    <ListItem
      primaryText="foo1"
      secondaryText="bar1"/>
    <ListItem
      primaryText="foo2"
      secondaryText="bar2"/>
  </List>
);

这有效。 寻找潜在的更好的答案/意见。 这个应该内置吗？

Answer 2

在 MUI v5 中，您可以使用

Stack

在垂直或水平方向显示事物列表。它在底层使用了 flexbox，因此

direction

属性被映射到 CSS 中旧的

flex-direction

：

<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

或者如果您使用的是

List

:

<List component={Stack} direction="row">

Answer 3

这些都不适合我，所以我猜想我带来了 2021 年版本：

        <List style={{ display: 'flex', flexDirection: 'row', padding: 0 }}>
            <ListItem button>hehe</ListItem>
            <ListItem button>hehe1</ListItem>
        </List>

Answer 4

玩完之后

.list-horizontal-display > div {
    display: inline-block;
}

<List className="list-horizontal-display" >
   <ListItem leftAvatar={<Avatar icon={this.props.icon}/>}></ListItem>
   <ListItem leftAvatar={<Avatar icon={this.props.icon}/>}><ListItem>
</List

Answer 5

嗯，你的方法会起作用。我的问题是你什么时候想在移动设备上查看此内容。弯曲方向需要更改为列。

使用会更好

display: inline-block

但 ListItem 组件将为每个项目添加一个 div 包装器。

如果 ListItem 实际上使用 containerElement 作为顶级包装而不是 div 元素，会更好。

Answer 6

尽管这并不能回答问题（因为您要求使用

<List>

和

<ListItem>

组件），但如果某些人想要更直观的东西，则可能会对 Material UI Gridlist 感兴趣。