失去焦点时更改 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"
  }
}));

失去焦点时更改 Material-UI TextField 的颜色

Change Color of Material-UI TextField when out of focus

textfield

reactjs

material-ui