React Material-UI Cookbook

There's more...

You can improve on the appearance of your nested list by differentiating the appearance of the sub-items. Right now, the only difference between the category items and subitems is that the category items have expand and collapse arrows.

Typically, list items are indented to indicate that they're part of another item in the hierarchy. Let's create a style that will allow you to indent subitems:

const useStyles = makeStyles(theme => ({  subItem: { paddingLeft: theme.spacing(3) }}));

The paddingLeft style property will shift everything in the list item to the right. Now, let's apply this class to subItem while also making the item smaller than the category items:

<ListItem  key={child.name}  className={classes.subItem}  button