title: Material UI Select focus and selected background color
body: <p>I have Select component and MenuItems inside it and I want to remove or override background color from focused Select component and selected MenuItem.</p>
  <p>Selected MenuItem has this background color:</p>
  <p><a href="https://i.stack.imgur.com/liVvJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/liVvJ.png" alt="enter image description here" /></a></p>
  <p>And after I select item Select component has focus which looks like this:</p>
  <p><a href="https://i.stack.imgur.com/AKjXc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AKjXc.png" alt="enter image description here" /></a></p>
  <p>Here is my Select component and MenuItem inside it:</p>
  <pre><code>&lt;Select
      classes={{ focused: classes.selected }}
  &gt;
      &lt;MenuItem
          classes={{ selected: classes.selected }}
      &gt;
          Never
      &lt;/MenuItem&gt;
  &lt;/Select&gt;
  </code></pre>
  <p>and I'm just tried to override background color to be same as normally:</p>
  <pre><code>focused: {
      backgroundColor: &quot;#fff&quot;,
  },
  
  selected: {
      backgroundColor: &quot;#fff&quot;,
  },
  </code></pre>
  <p>Any tips how to remove or override those background colors? Select component doesn't have to keep it's focus after option is selected.</p>
  <p><strong>EDIT:</strong> Found out where focused appears and I'm pretty sure I need to target it via inputProps but don't know how:</p>
  <p><a href="https://i.stack.imgur.com/nOS8l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nOS8l.png" alt="enter image description here" /></a></p>