Change InputLabel color of a Select component when clicked/focused

user_1189352 0
Viewed 5049

If you look at the components here: https://material-ui.com/components/selects/, you'll see that when clicked, the label moves up and minimizes but also changes color (along with the border / line at the bottom that defines the text).

I figured out how to change all the colors EXCEPT the text that minimizes when clicked or focused. If someone can please help me. It's driving me nuts

Bonus Points if you can explain how you got to this conclusion so I can learn how to do this myself as well.

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  inputLabel: {
    color: 'lightgray',
    focused: {
      color: 'orange'  // does not work
    }
  },
  select: {
    color: 'white',
    '&:before': {  // changes the bottom textbox border when not focused
      borderColor: 'red',
    },
    '&:after': {    // changes the bottom textbox border when clicked/focused.  thought it would be the same with input label
      borderColor: 'green',
    }
  }
}));

<FormControl className={classes.formControl}>
  <InputLabel
    className={classes.inputLabel}
  >Number of Lists</InputLabel>
  <Select
      className={classes.select}
      value={values.age}
      onChange={handleChange}
      inputProps={{
        name: 'age',
        id: 'age-simple',
      }}
  >
    <MenuItem value={1}>One</MenuItem>
    <MenuItem value={2}>Two</MenuItem>
  </Select>
</FormControl>
material-ui reactjs javascript
2 Answers

You can achieve this with the following (assuming Material-UI v4 or later):

  inputLabel: {
    color: "lightgray",
    "&.Mui-focused": {
      color: "orange"
    }
  },

Edit InputLabel focused

Here's the relevant documentation: https://material-ui.com/customization/components/#pseudo-classes

Prior to version 4 you would need something like:

// This is similar to Brad Ball's answer, but this nested syntax ensures proper specificity for the focused CSS.
  inputLabel: {
    color: "lightgray",
    "&$inputFocused": {
      color: "orange"
    }
  },
  inputFocused: {}

// then in the JSX:
  <InputLabel
    className={classes.inputLabel}
    classes={{ focused: classes.inputFocused }}
  >

Edit InputLabel focused

user_74959300

Here is the syntax for using focused:

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  inputLabel: {
    color: "lightgray"
  },
  inputFocused: {
    color: "orange" // does not work
  },
  select: {
    color: "white",
    "&:before": {
      // changes the bottom textbox border when not focused
      borderColor: "red"
    },
    "&:after": {
      // changes the bottom textbox border when clicked/focused.  thought it would be the same with input label
      borderColor: "green"
    }
  }
}));

<FormControl className={classes.formControl}>
  <InputLabel
    className={classes.inputLabel}
    classes={{ focused: classes.inputFocused }}
  >
    Number of Lists
  </InputLabel>
  <Select
    className={classes.select}
    value={values.age}
    onChange={handleChange}
    inputProps={{
      name: "age",
      id: "age-simple"
    }}
  >
    <MenuItem value={1}>One</MenuItem>
    <MenuItem value={2}>Two</MenuItem>
  </Select>
</FormControl>;
user_114830180
Related