title: How to change Material-UI TextField bottom and label color on error and on focus
body: <p>I have a Material UI <code>TextField</code> component that needs some color customization for :</p>
  
  <ul>
  <li><code>error</code></li>
  <li><code>focused</code></li>
  </ul>
  
  <p>I am using <a href="https://www.npmjs.com/package/@material-ui/core" rel="nofollow noreferrer">@material-ui/core</a> <code>3.8.1</code>   and it's <a href="https://github.com/mui-org/material-ui/blob/31dda8d7c5917e892b9cf5170489be3e2bc129a5/packages/material-ui/src/TextField/TextField.js#L49" rel="nofollow noreferrer"><code>&lt;TextField /&gt;</code></a> component.</p>
  
  <p>I want to avoid having to use <code>&lt;MuiThemeProvider&gt;</code></p>
  
  <p>This is how I have tried based on the recommendation here for the Material-UI <a href="https://material-ui.com/api/input" rel="nofollow noreferrer"><code>&lt;Input /&gt;</code></a> component and the answer <a href="https://stackoverflow.com/questions/50620393/how-to-change-material-ui-input-underline-colour?answertab=active#tab-top">here</a></p>
  
  <p>Reproduction: <a href="https://codesandbox.io/s/q9yj0y74z6" rel="nofollow noreferrer">https://codesandbox.io/s/q9yj0y74z6</a></p>