title: Changing TextField color in a react/material ui
body: <p>I have a react component with a text field and a button. I want them to appear green on a black background, and I'm not able to change the default colors of all elements. Based on this question : <a href="https://stackoverflow.com/questions/53764626/how-to-change-outline-color-of-material-ui-react-input-component">How to change outline color of Material UI React input component?</a> ; I was able to change outline, and label color. But I don't find any way to change also the color of the text entered by the user. I suppose I must overrides another property, but I didn't find which one.</p>
  
  <p>Thanks in advance for helping me. </p>
  
  <p>Regards</p>
  
  <p>code App.js : </p>
  
  <pre><code>import TestComponent from './TestComponent.js'
  import {ThemeProvider } from '@material-ui/core/styles';
  import theme from './Theme.js'
  
  function App() {
    return (
      &lt;ThemeProvider theme={theme}&gt;
          &lt;div&gt;
          &lt;TestComponent/&gt;
        &lt;/div&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>code from Theme.js</p>
  
  <pre><code>
  const Theme = createMuiTheme({
    palette: {
      primary: {
        main: '#2EFF22',
      },
      secondary: { main: '#22BF19' },
      grey: { main: '#22BF19' }
    },
    overrides: {
      MuiOutlinedInput: {
        root: {
          position: 'relative',
          '&amp; $notchedOutline': {
            borderColor: '#2EFF22',
          },
          '&amp;:hover:not($disabled):not($focused):not($error) $notchedOutline': {
            borderColor: '#2EFF22',
            // Reset on touch devices, it doesn't add specificity
            '@media (hover: none)': {
              borderColor: '#2EFF22',
            },
          },
          '&amp;$focused $notchedOutline': {
            borderColor: '#2EFF22',
            borderWidth: 1,
          },
        },
      },
      MuiFormLabel: {
        root: {
          '&amp;$focused': {
            color: '#2EFF22'
          }
        }
      }
    }
  })
  
  export default Theme
  </code></pre>
  
  <p>code from TestComponent</p>
  
  <pre><code>import Button from '@material-ui/core/Button';
  import TextField from '@material-ui/core/TextField';
  
  class TestComponent extends Component {
    constructor(props) {
      super(props)
    }
  
    render () {
  
      return (
        &lt;div style={{ display: 'flex', flexDirection: 'column', backgroundColor:'black' }}&gt;
          &lt;TextField id="Password" variant="outlined" required label="Password" style={{width:'150px', margin:'20px'}}/&gt;
          &lt;Button style={{width:'150px', margin:'20px'}} color="primary" variant="contained" onClick={() =&gt; console.log('OK')}&gt;
           OK
          &lt;/Button&gt;
        &lt;/div&gt;
      );
    }
  
  }
  
  export default TestComponent
  </code></pre>