title: How to override selected MenuItem style?
body: <p>I'm using the Material-ui-next Select component in a project.</p>
  
  <p>Most of the styles are being overriden using the <code>classes</code> prop. But the <code>selected</code> key can't get to work even using <code>MuiThemeProvider</code>.</p>
  
  <p>Here is the relevant parts of the code:</p>
  
  <p>...</p>
  
  <pre><code>const theme = createMuiTheme({
    overrides: {
      MuiMenuItem: {
        selected: {
          backgroundColor: 'transparent',
        }
      }
    }
  });
  </code></pre>
  
  <p>...</p>
  
  <pre><code>class SelectMUI extends Component {
  
    render() {
  
    const {className, name} = this.props
  
    return (
      &lt;MuiThemeProvider theme={theme}&gt;
        &lt;Select
          classes={{root: 'muisc-root', icon: 'muisc-icon', select: 'muisc-select', selectMenu: 'muisc-select-menu'}}
          className={`mui-select-custom ${className}`}
          endAdornment={&lt;Caret className='mui-select-caret'/&gt;}
          MenuProps={{classes: {paper: 'muisc-menu-paper'}}}
          {...this.props}
        &gt;
          {this.props.children}
        &lt;/Select&gt;
    &lt;/MuiThemeProvider&gt;
  )
  </code></pre>
  
  <p>}
  }</p>
  
  <p>So, as you can see, while I'm importing the MenuItems as props, I'm using the <code>MuiThemeProvider</code> to inject style in the items.</p>
  
  <p>And here is a screenshot of the applied style in a selected item:</p>
  
  <p><a href="https://i.stack.imgur.com/eaFUe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eaFUe.png" alt="enter image description here"></a></p>
  
  <p>How to override this selector that is combining two classes from the same element?</p>