title: How to change MUI input underline colour?
body: <p>I have a MUI <code>Select</code> component that is on a dark background, so for just this one component I'd like to change it so that the text and line colours are all white.  The rest of the <code>Select</code> instances should remain unchanged.</p>
  <p>While I can get the text and icon to change colour, I can't seem to figure out how to use the <code>classes</code> prop to set the underline colour.  My attempts also seem to make the open icon wrap to the next line too.  Here's an example demonstrating the problem:</p>
  <p><a href="https://codesandbox.io/s/m535jo44k9" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit Material demo" /></a></p>
  <p>I've set my style like this:</p>
  <pre><code>const styles = theme =&gt; ({
    underline: {
      borderBottom: '2px solid white',
      '&amp;:after': {
        // The MUI source seems to use this but it doesn't work
        borderBottom: '2px solid white',
      },
    }
  };
  </code></pre>
  <p>Then I'm setting it like this:</p>
  <pre><code>&lt;Select
    classes={{
      underline: classes.underline,     // Does it go here?
    }}
    inputProps={{
      classes: {
        underline: classes.underline,   // Or does it go here?
      },
    }}
  &gt;
  </code></pre>
  <p>This method does work for the text (not shown above, but in the linked example), it's just the underline colour that I can't get to change.  What am I missing?</p>