Sometimes, we want to make a horizontal list with React Material UI.

In this article, we’ll look at how to make a horizontal list with React Material UI.

How to make a horizontal list with React Material UI?

To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex'.

For instance, we write:

import * as React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "row",
    padding: 0
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <List className={classes.root}>
        <ListItem>
          <ListItemText primary="foo1" secondary="bar1" />
        </ListItem>
        <ListItem>
          <ListItemText primary="foo2" secondary="bar2" />
        </ListItem>
      </List>
    </div>
  );
}

We call makeStyles with a function that returns an object with the root class.

The root class property is set to an object that has the display property set to 'flex'.

This will make the list items display horizontally.

Next, we add the List into App.

And we add the ListItems into it.

Finally, we add ListItemText into the ListItems to add some text into each item.

Conclusion

To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex'.