How to change background color of a selected ItemList Material-Ui

Question

I have created a selectable component using Material-UI

let SelectableInfiniteList = makeSelectable(Infinite);

and put ListItem inside, now I want to change the default grayish color of a selected item, but I don't know how, if I give it a className

<ListItem className="list-item" primaryText={i}/>

and use list-item:focus selector I can change the background color as long as it is focused (but if I click somewhere else in the app) the focus is lost and the gray color shows up on the (still) selected item,

is there a way to change the selected item background color?

Answer 1

I had to use Global Theme override: https://material-ui.com/customization/components/#global-theme-override

const muiTheme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        "&$selected": {
          backgroundColor: "red",
          "&:hover": {
            backgroundColor: "orange",
          },
        },
      },
      button: {
        "&:hover": {
          backgroundColor: "yellow",
        },
      },
    },
  },
});

Answer 2

Change default selected gray color by passing selected style like this.

<ListItem
        button
        selected={true}
        classes={{ selected: classes.active }}>
  <ListItemText primary={item.name} />
</ListItem>

Style object should be like this.

active: {
  backgroundColor: "red"
}

Answer 3

Using Material UI v4 and this worked for me:

<ListItem button classes={{ root: classes.listItemRoot }}>
  ...
</ListItem>

with:

const useStyles = makeStyles((theme) => ({
  listItemRoot: {
    "&.Mui-selected": {
        backgroundColor: 'red',
    }
  },
}));