title: How can i change CSS of select component that inherited from inputBase, outlined and their pseudo-class
body: <p>I am trying to customize CSS  of a select component of material-ui this is inherited from class="MuiInputBase-root-97 MuiInput-root-84 MuiInput-underline-88 MuiInputBase-formControl-98 MuiInput-formControl-85" now i am stuck not able to change default design. Please help me, I don't have much experience with material-ui </p>
  
  <p>I have tried to pass an object in classes props of select to change style applied by MuiInputBase-root-97, MuiInput-root-84, MuiInput-underline-88, MuiInputBase-formControl-98, MuiInput-formControl-85, and their pseudo class</p>
  
  <pre><code>const styles = theme =&gt; ({
      root: {
        '&amp;$hover': {
        color: 'red',
      },
      },
      inputUnderline: {
        minWidth: 220,
      },
      selectEmpty: {
        marginTop: theme.spacing.unit * 2,
      },
  formControl: {
        margin: theme.spacing.unit,
        minWidth: 120,
      },
    });
  
  &lt;FormControl className={classes.formControl}&gt;
            &lt;Select
              value={this.state.age}
              onChange={this.handelchange}
              name="age"
              displayEmpty
              className={classes.selectEmpty}
              classes={{
              underline: classes.inputUnderline //change css of MuiInput-underline-88 and their pseudo class
              root: classes.inputBaseRoot //want to change css of MuiInputBase-root-97 and their pseudo class
              }}
            &gt;
              &lt;MenuItem value="" disabled&gt;
                Placeholder
              &lt;/MenuItem&gt;
              &lt;MenuItem value={10}&gt;Ten&lt;/MenuItem&gt;
              &lt;MenuItem value={20}&gt;Twenty&lt;/MenuItem&gt;
              &lt;MenuItem value={30}&gt;Thirty&lt;/MenuItem&gt;
            &lt;/Select&gt;
            &lt;FormHelperText&gt;Placeholder&lt;/FormHelperText&gt;
          &lt;/FormControl&gt;
  </code></pre>
  
  <p>I want to remove border at the bottom on hover, focus, after, and before
  I want a custom design in it overrides all CSS class at a select component<strong>strong text</strong></p>