title: Changing border color of Material-UI Select Component
body: <p>Here is my Select component from materials-UI</p>
  <pre><code>&lt;FormControl variant=&quot;outlined&quot;&gt;
  &lt;Select
      value={this.state.value}
      onChange = {this.handleChange}
      className={this.props.classes.select}
      inputProps = {{classes:{icon : this.props.classes.icon}}}
      &gt;
      {this.state.valuelist.map((block,idx) =&gt; {
       return(&lt;MenuItem key={Object.keys(block)[0]}
               value = {Object.keys(block)[0]}&gt;
               {Object.keys(block)[0]}&lt;/MenuItem&gt;)
      })}
  &lt;/Select&gt;
  &lt;/FormControl&gt;
  </code></pre>
  <p>and customized styling as recommended by another answers on stackoverflow:</p>
  <pre><code>const styles = theme =&gt; createStyles({
      select: {
          color : 'white',
          borderRadius : '10px',
          borderWidth : '10px',
          '&amp;:before': {
              borderColor: 'white',
          },
          '&amp;:after': {
              borderColor: 'white',
          } 
      },
      icon: {
          fill: '#00DBB3',
      }
  })
  </code></pre>
  <p>The icon customization works perfectly. However, the border colors don't change. I have tried many ways and answers so far and nothing seems to change the borderColor of the select component. Any help on this will be appreciated !</p>