Struggling with resizing a select component from material UI led to some unexpected challenges. Despite attempting to adjust the size using the className property, the label ended up misaligned and the selection shade appeared larger than the select box itself (height: 24px). This is the approach I took:
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
label="Age"
className={classes.MuiSelect}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
Additionally, here are the makestyles I employed:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
MuiSelect: {
width: "338px",
height: "24px"
}
}),
);
You can view the example on codesandbox
My final outcome was less than ideal: