单击/聚焦时更改 Select 组件的 InputLabel 颜色

如果您查看此处的组件：https://material-ui.com/components/selects/ 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>

您可以通过以下方式实现此目的（假设 Material-UI v4 或更高版本）：

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

这是相关文档：https://material-ui.com/customization/components/#pseudo-classes https://material-ui.com/customization/components/#pseudo-classes

在版本 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 }}
  >