Ensure that the variant is specified on the FormControl component rather than on the Select component. Placing it on the Select element causes the InputLabel to not receive the correct styling for the "filled" variant.
Take a look at the initial part of the "filled" style for InputLabel:
/* The below styles are applied to the root element when `variant="filled"` is used. */
filled: {
// Chrome's autofill feature gives the input field a yellow background.
// Since the input field is placed behind the label in the HTML tree,
// the input field is painted last and covers the label with an opaque background color.
// By setting zIndex: 1, the label will be positioned above the input which has opaque background colors.
zIndex: 1,
Pay attention to the comment explaining the necessity of z-index for elevating the label above opaque backgrounds (such as those set on the Select).
Here is a functional example showcasing the use of variant on the FormControl:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div>
<FormControl
variant="filled"
size="small"
className={classes.formControl}
>
<InputLabel
style={{ color: "#000" }}
id="demo-simple-select-filled-label"
>
Age
</InputLabel>
<Select
style={{ backgroundColor: "rgb(232, 241, 250)" }}
labelId="demo-simple-select-filled-label"
id="demo-simple-select-filled"
value={age}
onChange={handleChange}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
https://codesandbox.io/s/filled-select-with-background-color-dl1ic?fontsize=14&hidenavigation=1&theme=dark