Material UI and ReactJS, how to style a selected ListItem using withStyles?

Question

I want to change the style of the selected ListItem as shown in this codesandbox.
In the sandbox I use a global css stylesheet, but I would like to use the withStyle technique.
How can I do it?
What className should I use in order to target the selected ListItem?

Answer 1

If you are using stateless functional component, you should use makeStyles() instead of withStyles().

• withStyles() is HOC which is often used with class-based component.
• makeStyles() on the other hand is a hook creator, and hooks are more suitable in functional components. I'd advice you and your children to use this approach since more and more libraries are adopting hooks as the primary API instead of HOC.

You can see a list of ListItem css classes and class keys here to know which class to apply to.

const useStyles = makeStyles({
  root: {
    "& .Mui-selected": {
      backgroundColor: "pink",
      color: "red",
      fontWeight: "bold"
    },
    "& .Mui-selected:hover": {
      backgroundColor: "tomato"
    }
  }
});

function App() {
  const [selected, setSelected] = React.useState("home");
  const styles = useStyles();

  return (
    <List className={styles.root}>
      ...
    </List>
  );
}

If you want to use class key (selected) instead of css class (Mui-selected), you can write it like this

const useStyles = makeStyles({
  root: {
    "&$selected": {
      backgroundColor: "pink",
      color: "red",
      "&:hover": {
        backgroundColor: "tomato"
      }
    }
  },
  selected: {}
});

And apply to the component like this

<List>
  <ListItem
    classes={{
      root: styles.root,
      selected: styles.selected
    }}
    ...
  >
    ...
  </ListItem>
  ...
</List>

At this point you should consider refactor ListItem to a separate component to clean up the duplicated code.

Live Example