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",

Cardona

What version of material-ui are you using ? – Bromberg

@ArnaudChrist I am using the "@material-ui/core": "^1.0.0-rc.0", – Cardona

The right answer is the first answer here: #49439766 – Leery

Answer 1

In MUI v5, this is how you do it:

<Select
  MenuProps={{
    sx: {
      "&& .Mui-selected": {
        backgroundColor: "pink"
      }
    }
  }}
>

Live Demo

Doralynne

Man you are such a live saver! Thank you! Was searching for this. :) – Windham

In some cases, MUI MenuItem looks like selected but there is just a focus. Can be overriden by &.Mui-focusVisible. – Frasco

Answer 2

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 }}
>

Bromberg

This worked already before you made this example. But the thing is the !important flag. I don't like to use it, so is there an alternative for no using it? – Cardona

And would you like to update your demo to also cover the select underline color change? material-ui-next.com/demos/selects/#selects – Cardona

Sorry, I went to fast into typing code and forgot about your "!important" problem. It seems to be a bug, maybe you can open an issue about it on GitHub. A workaround could be to apply the appropriate background color in the root css according to the selected state and to not use the selected css. – Bromberg

Thanks! May you update your answer to apply to TextFields for material-ui. How would I be able to edit the underline of the TextField component which is animated from color with a transition css animation? – Cardona

I pretty confident you can change this color by overriding the primary color property in the material-ui theme you provide to your application. – Bromberg

How would I do it with the className or classes props? :) – Cardona

Answer 3

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

Spillman

Answer 4

You can updated your styles to this:

const homePageStyle = (theme) => ({
  root: {
    width: "300px"
  },
  selected: {
    '&.Mui-selected': {
        backgroundColor: "turquoise",
        color: "white",
        fontWeight: 600
    }
  }
});

This is because of how material-ui styles this component: .MuiListItem-root.Mui-selected The specificity of those two classes is taking priority over the provided override.

Tiler

Answer 5

To customize component style in Mui v5, you can try this:

MuiListItemButton: {
  styleOverrides: {
    root: {
      '&.Mui-selected': {
        backgroundColor: '#e44444',
      }
    }
  },
},

You'll want to use MuiListItemButton component, because "selected" is deprecated in MuiListItem.

Customizing components: https://mui.com/material-ui/customization/theme-components/

Helladic

Answer 6

In material ui 5 mentioned that we can change the style of the menu item like this

<Menu>
  <MenuItem 
   sx  = {{
      '&.MuiMenuItem-root': {
                justify-content: 'flex-start'
      },
     }}
  >
      Abc
  </MenuItem>
</Menu>

Dizon

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Christoforo

Why did you copy the intro of your own other answer that has different code? Do both code snippets achieve the same goal? That's not clear. – Langton