焦点不清晰时更改Material-UI TextField的颜色

Question

我有一个下面的TextField，它可以按预期工作，并且我想在标签不清晰时更改标签的颜色，因为当标签当前不清晰时，它保持黑色。

有人可以指导我如何实现这一目标吗？

const useStyles = makeStyles(theme => ({
  textField: {
    width: "300px"
  },
  cssLabel: {
    color: "white"
  },
  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: `white !important`
    }
  },
  cssFocused: { color: "white !important" },

  notchedOutline: {
    borderWidth: "1px",
    borderColor: "white !important"
  }
}));

<TextField
  id="username"
  label="Username"
  className={classes.textField}
  variant="outlined"
  required={true}
  InputLabelProps={{
    classes: {
      root: classes.cssLabel,
      focused: classes.cssFocused
    }
  }}
  InputProps={{
    classes: {
      root: classes.cssOutlinedInput,
      focused: classes.cssFocused,
      notchedOutline: classes.notchedOutline
    }
  }}
/>;

Answer 1

还将根样式的默认颜色设置为白色。

const useStyles = makeStyles(theme => ({
  textField: {
    width: "300px"
  },
  cssLabel: {
    color: "white"
  },
  cssOutlinedInput: {
    color: 'white',   // <!-- ADD THIS ONE
    "&$cssFocused $notchedOutline": {
      borderColor: `white !important`
    }
  },
  cssFocused: { color: "white !important" },

  notchedOutline: {
    borderWidth: "1px",
    borderColor: "white !important"
  }
}));