MUI - 你如何制作水平列表？

Question

在 MUI 中，我想使用：

List和ListItem但讓它們水平顯示。

最好的方法是什么？

Answer 1

到目前為止，我有：

const flexContainer = {
  display: 'flex',
  flexDirection: 'row',
  padding: 0,
};

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

這有效。 尋找潛在的更好的答案/意見。 這應該內置嗎？

Answer 2

玩完之后

.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 3

嗯，你的方法會奏效。 我的問題是你什么時候想在手機上查看這個。 flex 方向需要改為一列。

如果使用display: inline-block會更好，但 ListItem 組件將為每個項目添加一個 div 包裝器。

如果 ListItem 實際上使用 containerElement 作為頂級包裝器而不是 div 元素會更好。

Answer 4

盡管這並沒有回答問題（因為您已經要求使用<List>和<ListItem>組件），但如果某些人想要更直觀的東西， Material UI Gridlist可能會引起某些人的興趣。

Answer 5

這些都不適合我，所以我想我帶來了 2021 版本：

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

Answer 6

在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">