title: Change color of Select component's border and arrow icon Material UI
body: <p>I'm trying to use a Material UI <a href="https://material-ui.com/demos/selects/" rel="noreferrer">Select</a> component on a dark background:</p>
  
  <p><a href="https://i.stack.imgur.com/QKtnb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QKtnb.png" alt="enter image description here"></a></p>
  
  <p>But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:</p>
  
  <pre class="lang-js prettyprint-override"><code>const styles = theme =&gt; {
      root: {
         borderBottom: '1px solid white',
      },
      icon: {
         fill: 'white',
      },
  }
  
  class MyComponent extends React.Component {
  
      render() {
          const {classes} = this.props;
          return (
              &lt;Select
                  value={this.props.value}
                  inputProps={{
                      classes: {
                          root: classes.border,
                          icon: classes.icon,
                      },
                  }}
              &gt;
                  &lt;MenuItem
                      value={this.props.value}
                  &gt;
                      Foo
                  &lt;/MenuItem&gt;
              &lt;/Select&gt;   
          )
      }
  }
  </code></pre>
  
  <p>However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.</p>