Change Inputlabel Color Of A Select Component When Clicked/focused

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

Solution 1:

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

Solution 2:

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 focusedborderColor: "red"
    },
    "&:after": {
      // changes the bottom textbox border when clicked/focused.  thought it would be the same with input labelborderColor: "green"
    }
  }
}));

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