title: Can't change border color of Material-UI OutlinedInput
body: <p>I'm trying to change the border color of a v4.13 <a href="https://material-ui.com/api/outlined-input/#outlinedinput-api" rel="noreferrer">MaterialUI Outlined Input</a>. However I have not gotten anything to work when trying to override the CSS.</p>
  
  <p>I've tried multiple CSS rules applied to each element, the select and the OutlinedInput, with the two below being the most recent. What am I doing wrong here?</p>
  
  <pre><code>const styles = () =&gt;
    createStyles({
      select: {
        "&amp;:before": {
          borderColor: "red"
        },
        "&amp;:after": {
          borderColor: "red"
        },
      },
      outline: {
        "&amp;:before": {
          borderColor: "red"
        },
        "&amp;:after": {
          borderColor: "red"
        },
      }
    });
  
     &lt;Select
        label={label}
        fullWidth={true}
        error={touched &amp;&amp; invalid}
        className={inputStyles}
        classes={{ root: classes.select }}
        input={
          &lt;OutlinedInput
            {...input}
            fullWidth={true}
            id={input.name}
            labelWidth={this.state.labelWidth}
            classes={{notchedOutline: classes.outline}}
          /&gt;
        }
        {...custom}
      &gt;
        {children}
      &lt;/Select&gt;
  </code></pre>
  
  <p>I can see here where the border-color is being set, but am unable to override it.</p>
  
  <p><a href="https://i.stack.imgur.com/1GUWT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1GUWT.png" alt="enter image description here"></a></p>