Изменение цвета InputLabel компонента Select при щелчке / фокусировке

Question

Если вы посмотрите на компоненты здесь: https://material -ui.com / components / selects * , вы увидите, что при нажатии метка перемещается вверх и минимизируется, но также меняет цвет (вдоль с границей / линией внизу, которая определяет текст).

Я выяснил, как изменить все цвета, КРОМЕ текста, который минимизируется при нажатии или фокусировке. Если кто-то может, пожалуйста, помогите мне. Это сводит меня с ума

Бонусные баллы, если вы можете объяснить, как вы пришли к такому выводу, чтобы я мог научиться делать это и сам.

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>

Answer 1

Этого можно добиться с помощью следующего (при условии, что Material-UI v4 или более поздней версии):

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

Вот соответствующая документация: https://material -ui.com / customization / components / # псевдоклассы

До версии 4 вам нужно что-то вроде:

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

Answer 2

Вот синтаксис для использования сосредоточенного:

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