title: Set MUI Select width?
body: <p>I am trying to set the MUI <code>Select</code> component's width. For this I have to provide a class to the <code>FormControl</code> component, such as <code>mw-120</code> which links to a CSS class defining the <code>min-width</code> of 120px.</p>
  <p>Material UI Select component:</p>
  <pre><code>&lt;FormControl className='mw-120'&gt;
      &lt;InputLabel htmlFor='selected-language'&gt;Language&lt;/InputLabel&gt;
      &lt;Select value={this.state.selectedLanguage}
              onChange={(e) =&gt; this.onLanguageChange(e.target.value)}
              inputProps={{
                  name: 'language',
                  id: 'selected-language',
              }}&gt;
          {menuItems}
      &lt;/Select&gt;
  &lt;/FormControl&gt;
  </code></pre>
  <p>CSS class:</p>
  <pre><code>.mw-120 {
      min-width: 120px;
  }
  </code></pre>
  <p>While I would expect the size of the <code>Select</code> component to now have a width of 120px minimum, the component remains exactly the same after rendering, as shown in the following picture. In other words, it is to narrow. The width is not big enough. The width should be greater than the label <code>Language</code>.</p>
  <p><a href="https://i.stack.imgur.com/aRmEJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aRmEJ.png" alt="width of Select component too small" /></a></p>
  <p>An element analysis within the Chrome Developer Tools has shown that the main DIV element of that component has a class <code>.MuiFormControl-root-234</code> that contains <code>min-width: 0;</code>, and it is located/ranked higher than my <code>.mw-120</code> class. I guess this overrides my <code>.mw-120</code> class, right? Is there any other way to influence the width of the Material UI Select component? There are no helpful examples of influencing the width of this component on the <a href="https://material-ui.com/demos/selects/" rel="noreferrer">Material UI Select component page</a>.</p>