title: Material-UI Input component underline color
body: <p>I am trying to make an input component that has a white underline.  Currently, when the user hovers over the component, the underline color changes to black.  I would expect this be white.  I believe this should be possible by overriding the underline class as in the demo and outlined below.  Unfortunately, it doesn't seem to work, but if I inspect the styles manually in the browser and remove the below line it works as expected in the browser.</p>
  
  <p>Example: <a href="https://stackblitz.com/edit/yjpf5s" rel="noreferrer">https://stackblitz.com/edit/yjpf5s</a> (View: <a href="https://yjpf5s.stackblitz.io" rel="noreferrer">https://yjpf5s.stackblitz.io</a>)</p>
  
  <p>Style removed manually in browser to obtain desired functionality: </p>
  
  <pre><code>.MuiInput-underline-365:hover:not(.MuiInput-disabled-364):not(.MuiInput-focused-363):not(.MuiInput-error-366):before {
    border-bottom: 2px solid rgba(0, 0, 0, 0.87);
  </code></pre>
  
  <p>The overide class style I am using:</p>
  
  <pre><code>underline: {
  
          color: palette.common.white,
          borderBottom: palette.common.white,
          '&amp;:after': {
              borderBottom: `2px solid ${palette.common.white}`,          
          },              
          '&amp;:focused::after': {
              borderBottom: `2px solid ${palette.common.white}`,
          },              
          '&amp;:error::after': {
              borderBottom: `2px solid ${palette.common.white}`,
          },                      
          '&amp;:before': {
              borderBottom: `1px solid ${palette.common.white}`,          
          },
          '&amp;:hover:not($disabled):not($focused):not($error):before': {
              borderBottom: `2px solid ${palette.common.white}`,
          },
          '&amp;$disabled:before': {
              borderBottom: `1px dotted ${palette.common.white}`,
          },              
      },
  </code></pre>
  
  <p>Edit: 
  Here is the solution that ended up working:</p>
  
  <pre><code>'&amp;:hover:not($disabled):not($focused):not($error):before': {
      borderBottom: `2px solid ${palette.common.white} !important`,
  },
  </code></pre>