Material-UI <Select/>如何改变下划线和标签颜色

Question

我用这个演示改变了一些输入字段的颜色：https://stackblitz.com/edit/material-ui-custom-outline-color

我想知道当他们从材质 UI 更改选择组件的颜色时，是否有人有类似的演示？或者一些关于如何去做的说明（我已经查看了文档，但正在努力遵循它们）。

谢谢！

Answer 1

用<FormControl /> 包装您的选择，并将<InputLabel /> 添加为<Select /> 同级。
之后，覆盖 InputLabel 根类并提供 className 来选择组件：

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  underline: {
    color: 'red' ,
    '&::after': {
      borderBottom: '2px solid red'
    },
    '&::before': {
      borderBottom: '2px solid yellow'
    }
  },
  inputLabelRoot: {
    color: 'red',
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel classes={{root: classes.inputLabelRoot}}>Age</InputLabel>
        <Select
          className={classes.underline}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}