How to override Material-UI MenuItem selected background color?

Question

Currently I am struggling with setting the background color of a MenuItem component which is selected to a different color. (without having to using !important to force it)

The component code:

<MenuItem
 classes={{
  root: this.props.classes.root,
  selected: this.props.classes.selected
 }}
 value={10}>
  Alfabetical
</MenuItem>

This is the css:

const homePageStyle = (theme) => ({
  root: {
    width: "300px"
  },
  selected: {
    backgroundColor: "turquoise !important",
    color: "white",
    fontWeight: 600
  }
});

What do I want to achieve?

I would like to set the backgroundColor of the MenuItem without having to set the !important flag. I've done that with plenty of components but this seems not work around at the moment.

I am using version "@material-ui/core": "^1.0.0-rc.0",

Answer 1

I just made a working example here

For your selected class to be taken into account, you have to set the selected property of your MenuItem component to true

<MenuItem
  onClick={this.handleClose}
  selected
  classes={{ selected: classes.selected }}
>

Answer 2

I'm doing it this way to change the MenuItem background of selected. (selected prop provided by material UI).

export default createMuiTheme({
  overrides: {
    MuiMenuItem: { // For ListItem, change this to MuiListItem
      root: {
        "&$selected": {       // this is to refer to the prop provided by M-UI
          backgroundColor: "black", // updated backgroundColor
        },
      },
    },
  },
});

These are the defaults that can be overridden https://material-ui.com/customization/default-theme/#default-theme

Reference: https://material-ui.com/customization/components/#global-theme-override

Note: I'm using Material-UI version 4.9.11