Style selected list-item Material UI V5

Question

I am using Material V5. How do I style the selected list item? I want a borderLeft of 5px.

Something like this:

const theme = createTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: colors.primary
      // dark: will be calculated from palette.primary.main,
    }
  },
  components: {
    MuiListItem: {
      styleOverrides: {
        root: {
          "&$selected": {
            borderLeft: `5px solid ${colors.primary}`
          }
        }
      }
    }
  }
});

This is my codesandbox:

Link

import * as React from 'react';
import Box from '@material-ui/core/Box';
import List from '@material-ui/core/List';
import ListItemButton from '@material-ui/core/ListItemButton';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';
import InboxIcon from '@material-ui/icons/Inbox';
import DraftsIcon from '@material-ui/icons/Drafts';

export default function SelectedListItem() {
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleListItemClick = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
    index: number,
  ) => {
    setSelectedIndex(index);
  };

  return (
    <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItemButton
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
        >
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </ListItemButton>
        <ListItemButton
          selected={selectedIndex === 1}
          onClick={(event) => handleListItemClick(event, 1)}
        >
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </ListItemButton>
      </List>
      <Divider />
      <List component="nav" aria-label="secondary mailbox folder">
        <ListItemButton
          selected={selectedIndex === 2}
          onClick={(event) => handleListItemClick(event, 2)}
        >
          <ListItemText primary="Trash" />
        </ListItemButton>
        <ListItemButton
          selected={selectedIndex === 3}
          onClick={(event) => handleListItemClick(event, 3)}
        >
          <ListItemText primary="Spam" />
        </ListItemButton>
      </List>
    </Box>
  );
}

Answer 1

There were two issues with your overrides:

1. You are using ListItemButton in your code without ListItem which is fine, but then you need to use MuiListItemButton instead of MuiListItem for the component name in the theme.
2. You used "&$selected" to reference the selected state, but this should instead be "&.Mui-selected".

From https://mui.com/guides/migration-v4/#migrate-themes-styleoverrides-to-emotion:

Although your style overrides defined in the theme may partially work, there is an important difference on how the nested elements are styled. The $ syntax used with JSS will not work with Emotion. You need to replace those selectors with a valid class selector.

Here's what the working version looks like:

const theme = createTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: colors.primary
      // dark: will be calculated from palette.primary.main,
    }
  },
  components: {
    MuiListItemButton: {
      styleOverrides: {
        root: {
          "&.Mui-selected": {
            borderLeft: `5px solid ${colors.primary}`
          }
        }
      }
    }
  }
});