Resizing components in Material UI without deformatting - css

Question

I have been trying to resize a select component from material UI. The problem that arrised was the fact that I could not resize the component properly with the help of the className property, the label was not in the right place and the selection shade height was greater than the one from the select box I resized (height: 24px). This is what i tried:
<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>
And this was the makestyles I used:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
MuiSelect: {
width: "338px",
height: "24px"
}
}),
);
The link to the sandbox with the example: codesandbox
Finally, this was the result:
Box with the label in the wrong place
The shade of the selection is bigger than the actual box

Answer 1

As you have changed the size of the select element, you should also modify the .MuiInputLabel-outlined of the related InputLabel element, as well as the MuiSelect-outlined to fit the shadows of the select box to its width and height sandbox
First please add these outlined and selectOutlined objects to the useStyles
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
},
MuiSelect: {
width: "338px",
height: "24px"
},
outlined: {
transform: "translate(4px, 3px)"
},
selectOutlined: {
padding: "0px 14px"
}
})
);
And then add them to the InputLabel and Select elements
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel
className={classes.outlined}
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"
classes={{
root: classes.MuiSelect,
outlined: classes.selectOutlined
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>