Material-ui:如何制作水平列表

Question

在Material-ui中,我想使用

<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

在MUI v5中，您可以用于Stack在垂直或水平方向显示事物列表。它在底层使用了 flexbox，因此directionprop 被映射到 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">