CODEWITHSUNDEEP
reactjsmaterial-ui
Daniel Miclos
Daniel Miclos

Reputation: 373

How to override selected MenuItem style?

I'm using the Material-ui-next Select component in a project.

Most of the styles are being overriden using the classes prop. But the selected key can't get to work even using MuiThemeProvider.

Here is the relevant parts of the code:

...

const theme = createMuiTheme({
  overrides: {
    MuiMenuItem: {
      selected: {
        backgroundColor: 'transparent',
      }
    }
  }
});

...

class SelectMUI extends Component {

  render() {

  const {className, name} = this.props

  return (
    <MuiThemeProvider theme={theme}>
      <Select
        classes={{root: 'muisc-root', icon: 'muisc-icon', select: 'muisc-select', selectMenu: 'muisc-select-menu'}}
        className={`mui-select-custom ${className}`}
        endAdornment={<Caret className='mui-select-caret'/>}
        MenuProps={{classes: {paper: 'muisc-menu-paper'}}}
        {...this.props}
      >
        {this.props.children}
      </Select>
  </MuiThemeProvider>
)

} }

So, as you can see, while I'm importing the MenuItems as props, I'm using the MuiThemeProvider to inject style in the items.

And here is a screenshot of the applied style in a selected item:

enter image description here

How to override this selector that is combining two classes from the same element?

Upvotes: 7

Views: 15534

Answers (2)

Trevor Robinson
Trevor Robinson

Reputation: 16604

Here's the MUI 5 version:

const theme = createTheme({
  components: {
    MuiMenuItem: {
      styleOverrides: {
        root: {
          "&.Mui-selected": {
            backgroundColor: "transparent"
          }
        }
      }
    }
  }
});

I expected to be able to directly override the style for selected, but that didn't work.

Upvotes: 4

Daniel Miclos
Daniel Miclos

Reputation: 373

ok, I figure it out how to override a combined selector. Here is the solution:

   MuiMenuItem: {
      root: {
        background: 'transparent',
        '&$selected': { // <-- mixing the two classes
          backgroundColor: 'transparent'
        }
      }
    }

Upvotes: 14

Related Questions