title: Material UI change Input's active color
body: <p>How do I change the color of an active input? I'd like to change the default blue one but cant find how to. </p>
  
  <p>From what I've tried it's not a matter of <code>color</code> attribute, neither in the FormControl, the InputLabel or the Input. Also there is no <code>underlineStyle</code> prop available (<a href="https://material-ui-next.com/api/input/" rel="nofollow noreferrer">docs</a>)</p>
  
  <p>I'd like to change the color only when the input is active, that is to say the user is writing in it, to my <code>primary</code> color as defined in my <code>theme</code>.</p>
  
  <p>I'm using <code>Input</code> and not <code>TextField</code> because I want to use <code>InputAdornments</code> as per <a href="https://material-ui-next.com/demos/text-fields/#input-adornments" rel="nofollow noreferrer">https://material-ui-next.com/demos/text-fields/#input-adornments</a>.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>It seems like I should change <code>.MuiInput-inkbar-169:after</code>'s <code>background-color</code>. How do you suggest I do that? Is there another way?</p>
  
  <pre><code>/* eslint-disable flowtype/require-valid-file-annotation */
  
  import React from 'react';
  import { withStyles } from 'material-ui/styles';
  import Input, { InputLabel } from 'material-ui/Input';
  import { FormControl } from 'material-ui/Form';
  
  const styles = theme =&gt; ({
      formControl: {
          margin: theme.spacing.unit,
          width: '100%',
      },
      textField: {
          marginLeft: theme.spacing.unit,
          marginRight: theme.spacing.unit,
      }
  });
  
  class CustomInput extends React.Component {
  
      ...
  
      render() {
          const { classes, label, id } = this.props;
          const error = (this.props.valid === undefined ? false : !this.props.valid) &amp;&amp; this.state.visited
          return (
              &lt;FormControl className={classes.formControl} &gt;
                  &lt;InputLabel error={error}&gt;{label}&lt;/InputLabel&gt;
                  &lt;Input
                      id={id}
                      className={classes.textField}
                      value={this.state.value || ''}
                      endAdornment={this.props.endAdornment ?
                          &lt;InputAdornment position="end"&gt;
                              {this.props.endAdornment}
                          &lt;/InputAdornment&gt; : ''
                      }
                  /&gt;
              &lt;/FormControl&gt;
          );
      }
  }
  
  CustomInput.propTypes = {
      classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(CustomInput);
  </code></pre>
  
  <p>Adding this to my <code>style.css</code> does not change anything, even trying with an <code>!important</code></p>
  
  <pre><code>.MuiInput-inkbar-169:after {
    background-color: #3f51b5 !important
  }
  </code></pre>