Change InputLabel color of a Select component when clicked/focused

Question

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>

score 3 · Accepted Answer · answered Jun 17 '19 at 23:24

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

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

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 }}
  >

YESS it worked thank you so much. and thank you for the link. i figured out the other one just through a SO link but i didn't really understand how to come up with the solution on my own. so thank you! — user1189352, Jun 17 '19 at 23:37

score 0 · Answer 2 · answered Jun 17 '19 at 23:12

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>;

i really wish it worked but i couldn't get it to work unfortunately — user1189352, Jun 17 '19 at 23:22

Change InputLabel color of a Select component when clicked/focused

2 Answers2

Linked