title: Material-UI 4.1.2 Styling Select SelectInput
body: <p>I want to alter the style of the SelectInput. I'm using a class based component. I set it up this way:</p>
  
  <pre><code>const QuoteListStyle = {
    color: "#eceff1",
    borderBottom: "1px solid #90caf9",
    "&amp;:hover:not($disabled):not($focused):not($error) $underline": {
      borderBottom: "2px solid #90caf9"
    },
    width: "196px",
    marginTop: "1rem"
  };
  </code></pre>
  
  <p>Then in the render I have this section with the Select:</p>
  
  <pre><code>&lt;FormControl&gt;
                      &lt;Select
                        style={QuoteListStyle}
                        value={this.state.quoteListName}
                        onChange={this.handleChange}
                        displayEmpty={true}
                        renderValue={
                          this.state.quoteListName &gt; 0
                            ? undefined
                            : () =&gt; &lt;em&gt;{this.state.quoteListName}&lt;/em&gt;
                        }
                      &gt;
                        &lt;MenuItem value="" disabled&gt;
                          &lt;em&gt;Select a Quote List&lt;/em&gt;
                        &lt;/MenuItem&gt;
  
                        {data.me.quoteList.map(item =&gt; {
                          return (
                            &lt;MenuItem value={item.name} key={item.name}&gt;
                              {item.name}
                            &lt;/MenuItem&gt;
                          );
                        })}
                      &lt;/Select&gt;
                    &lt;/FormControl&gt;
  </code></pre>
  
  <p>I'm using the basic Select component that only has an underline. I want to change the color and size of the underline. I looked here in the source:</p>
  
  <p><a href="https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Select/SelectInput.js" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Select/SelectInput.js</a></p>
  
  <p>What do I look for to control the underline? 
  I am seeing the underline that I want when the component loads. The hover is not working. After an item from the Select is chosen, I see my style on top but the default style is below and I can see some of that color. </p>
  
  <p>I would be ok using overrides for this. Here's my theme code:</p>
  
  <pre><code>const theme = createMuiTheme({
    palette: {
      primary: {
        main: "#90caf9",
        contrastText: "#f5f5f5"
      },
      secondary: {
        main: "#19857b"
      },
      error: {
        main: "#f44336"
      },
      background: {
        default: "#102027",
        paper: "#37474f"
      },
      text: {
        primary: "#eceff1",
        secondary: "#90caf9"
      },
      button: {
        borderColor: "#90caf9"
      }
    },
    overrides: {
      MuiOutlinedInput: {
        root: {
          "&amp; $notchedOutline": {
            borderColor: "#90caf9"
          },
          "&amp;:hover:not($disabled):not($focused):not($error) $notchedOutline": {
            borderColor: "#90caf9",
            borderWidth: 2
          },
          "&amp;$focused $notchedOutline": {
            borderColor: "#90caf9"
          }
        },
        notchedOutline: {}
      },
      MuiSelect: {
        icon: {
          fill: "#90caf9"
        }
      }
    }
  });
  
  export default theme;
  </code></pre>
  
  <p>I also looked in the devtools and found this:</p>
  
  <pre><code>&lt;div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input MuiInputBase-inputSelect" aria-pressed="false" tabindex="0" role="button" aria-haspopup="true"&gt;&lt;em&gt;Tech&lt;/em&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure how to use that to target what I want.</p>