title: material ui border color overwriting the texbox
body: <ul>
  <li>when I intially load the page the border color of the text box should be red in color.</li>
  <li>but the problem is its showing grey color.</li>
  <li>so I gave border color: red to all the classes.</li>
  <li>but still it doesnt change.</li>
  <li><p>not sure how to target this tag.
  </p></li>
  <li><p>i achieved by giving important. is it possible to achieve without giving important</p></li>
  <li><p>can you guys let me know so that in future I will fix it myself.</p></li>
  <li>providing my code snippet and sandbox below.</li>
  </ul>
  
  <p><a href="https://codesandbox.io/s/m58841kkwp" rel="nofollow noreferrer">https://codesandbox.io/s/m58841kkwp</a></p>
  
  
  
  <pre class="lang-or-tag-here prettyprint-override"><code> cssLabel: {
      "&amp;$cssFocused": {
        color: { borderColor: "red" }
      }
    },
    cssFocused: { borderColor: "red" },
    cssUnderline: {
      "&amp;:after": {
        borderBottomColor: "red"
      }
    },
    cssOutlinedInput: {
      "&amp;$cssFocused $notchedOutline": {
        borderColor: "green"
      }
    },
    notchedOutline: { borderColor: "red !important" },
  
  
  
     &lt;div className={classes.container}&gt;
        &lt;TextField
          className={classes.margin}
          InputLabelProps={{
            classes: {
              root: classes.cssLabel,
              focused: classes.cssFocused
            }
          }}
          InputProps={{
            classes: {
              root: classes.cssOutlinedInput,
              focused: classes.cssFocused,
              notchedOutline: classes.notchedOutline
            }
          }}
          label="Custom CSS border"
          variant="outlined"
          id="custom-css-outlined-input"
        /&gt;
      &lt;/div&gt;
  </code></pre>