MaterialUI: Why does setting background color on Select component hides the InputLabel text and how could I avoid it happening?

Question

Basically I'm just trying to change the background color on dropdown elements but I also would like to keep the default text showing there. Right now, if I don't set up background color explicitly on the Select component, text specified in InputLabel shows up just fine, but as soon as I add style={{backgroundColor: "rgb(232, 241, 250)"}} to the Select, this InputLabel text disappears. Why does it happen and what could be done to fix this?

Code Snippet:

<FormControl required fullWidth={true} size="small">
  <InputLabel htmlFor="name" style={{color: "#000"}}>Тема обращения</InputLabel>
  <Select
     variant="filled" 
     style={{backgroundColor: "rgb(232, 241, 250)"}}
     value={props.selectedTheme?.id || ''}
     onChange={(e) => handleChange(e)}>
     {props.themes.map(t => (<MenuItem key={t.id} value={t.id}>{t.name}</MenuItem>))}
  </Select>
</FormControl>

Screenshot:

score 4 · Accepted Answer · answered Nov 02 '20 at 17:45

You should be specifying the variant on the FormControl element instead of on the Select element. With putting it on the Select, the InputLabel element is not getting the appropriate styling for the "filled" variant.

Here's the beginning of the "filled" style for InputLabel:

  /* Styles applied to the root element if `variant="filled"`. */
  filled: {
    // Chrome's autofill feature gives the input field a yellow background.
    // Since the input field is behind the label in the HTML tree,
    // the input field is drawn last and hides the label with an opaque background color.
    // zIndex: 1 will raise the label above opaque background-colors of input.
    zIndex: 1,

Note the comment indicating that the z-index is needed to raise the label above opaque background colors (as you are setting on the Select).

Here's a working example demonstrating the 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>
  );
}

MaterialUI: Why does setting background color on Select component hides the InputLabel text and how could I avoid it happening?

1 Answers1