Material UI - How do you make a horizontal List?

Question

In Material UI, I'd like to use:

List and ListItem but have them appear horizontally.

What's the best way?

Answer 1

In MUI v5, you can use Stack to display a list of thingies in vertical or horizontal direction. It uses flexbox under the hood so the direction prop is mapped to the good old flex-direction in CSS:

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

Or if you're using a List:

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