title: MUI Select - Change Select size
body: <p>whilst using the selects from MUI, I'm struggling to get them working properly using a height and width with 'vh' and 'vw' appropriately and a text-size using 'vh'.</p>
  <p>I end up having a proper size for the boxes, but the label text is not centered anymore due to apparently using a 'transform' to offset itself from the top left corner.</p>
  <p>Anyway, here's what I have:
  <a href="https://codesandbox.io/s/material-demo-ujz2g" rel="noreferrer">https://codesandbox.io/s/material-demo-ujz2g</a></p>
  <pre><code>import React from &quot;react&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import InputLabel from &quot;@material-ui/core/InputLabel&quot;;
  import MenuItem from &quot;@material-ui/core/MenuItem&quot;;
  import FormHelperText from &quot;@material-ui/core/FormHelperText&quot;;
  import FormControl from &quot;@material-ui/core/FormControl&quot;;
  import Select from &quot;@material-ui/core/Select&quot;;
  
  const useStyles = makeStyles(theme =&gt; ({
    formControl: {
      margin: theme.spacing(1),
      width: &quot;20vw&quot;
    },
    selectEmpty: {
      marginTop: theme.spacing(2)
    },
    select: {
      height: &quot;10vh&quot;
    },
    inputLabel: {
      fontSize: &quot;4vh&quot;,
      alignSelf: &quot;center&quot;
    }
  }));
  
  export default function SimpleSelect() {
    const classes = useStyles();
    const [age, setAge] = React.useState(&quot;&quot;);
  
    const inputLabel = React.useRef(null);
    const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() =&gt; {
      setLabelWidth(inputLabel.current.offsetWidth);
    }, []);
  
    const handleChange = event =&gt; {
      setAge(event.target.value);
    };
  
    return (
      &lt;div&gt;
        &lt;FormControl variant=&quot;outlined&quot; className={classes.formControl}&gt;
          &lt;InputLabel
            className={classes.inputLabel}
            ref={inputLabel}
            id=&quot;demo-simple-select-outlined-label&quot;
          &gt;
            Age
          &lt;/InputLabel&gt;
          &lt;Select
            className={classes.select}
            labelId=&quot;demo-simple-select-outlined-label&quot;
            id=&quot;demo-simple-select-outlined&quot;
            value={age}
            onChange={handleChange}
            labelWidth={labelWidth}
          &gt;
            &lt;MenuItem value=&quot;&quot;&gt;
              &lt;em&gt;None&lt;/em&gt;
            &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;/FormControl&gt;
        &lt;FormControl variant=&quot;filled&quot; className={classes.formControl}&gt;
          &lt;InputLabel id=&quot;demo-simple-select-filled-label&quot;&gt;Age&lt;/InputLabel&gt;
          &lt;Select
            labelId=&quot;demo-simple-select-filled-label&quot;
            id=&quot;demo-simple-select-filled&quot;
            value={age}
            onChange={handleChange}
          &gt;
            &lt;MenuItem value=&quot;&quot;&gt;
              &lt;em&gt;None&lt;/em&gt;
            &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;/FormControl&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { makeStyles, InputLabel, MenuItem, FormHelperText, FormControl, Select } = MaterialUI;
  
  const useStyles = makeStyles(theme =&gt; ({
    formControl: {
      margin: theme.spacing(1),
      width: "20vw"
    },
    selectEmpty: {
      marginTop: theme.spacing(2)
    },
    select: {
      height: "10vh"
    },
    inputLabel: {
      fontSize: "4vh",
      alignSelf: "center"
    }
  }));
  
  function SimpleSelect() {
    const classes = useStyles();
    const [age, setAge] = React.useState("");
  
    const inputLabel = React.useRef(null);
    const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() =&gt; {
      setLabelWidth(inputLabel.current.offsetWidth);
    }, []);
  
    const handleChange = event =&gt; {
      setAge(event.target.value);
    };
  
    return (
      &lt;div&gt;
        &lt;FormControl variant="outlined" className={classes.formControl}&gt;
          &lt;InputLabel
            className={classes.inputLabel}
            ref={inputLabel}
            id="demo-simple-select-outlined-label"
          &gt;
            Age
          &lt;/InputLabel&gt;
          &lt;Select
            className={classes.select}
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            value={age}
            onChange={handleChange}
            labelWidth={labelWidth}
          &gt;
            &lt;MenuItem value=""&gt;
              &lt;em&gt;None&lt;/em&gt;
            &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;/FormControl&gt;
        &lt;FormControl variant="filled" className={classes.formControl}&gt;
          &lt;InputLabel id="demo-simple-select-filled-label"&gt;Age&lt;/InputLabel&gt;
          &lt;Select
            labelId="demo-simple-select-filled-label"
            id="demo-simple-select-filled"
            value={age}
            onChange={handleChange}
          &gt;
            &lt;MenuItem value=""&gt;
              &lt;em&gt;None&lt;/em&gt;
            &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;/FormControl&gt;
      &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;SimpleSelect /&gt;, document.querySelector('#root'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" /&gt;
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /&gt;
  &lt;script src="https://unpkg.com/react@17/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/@material-ui/core@4/umd/material-ui.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>EDIT: the odd behavior is especially visible when zooming in and out - the label itself moves within the dropdown.</p>