Javascript “焦点”属性不使用样式，但在“焦点样式”起作用之前使用

我正在尝试为材质ui更改TextInput的字体颜色，但它不起作用。当我点击离开时，它会改变字体颜色（变成白色），但当我再次关注输入时，它会变成紫色（我下载它时，材质ui附带的默认颜色）。我不知道我做错了什么，任何帮助都将不胜感激

风格：

  const useStyles = makeStyles(theme => ({
    "@global": {
      body: {
        backgroundColor: darkModeEnabled ? DARK_COLOR : WHITE,
        color: darkModeEnabled ? WHITE : DARK_COLOR
      }
    },
    input: {
      bottomBorder: "white",
      color: "white",
      "&:focus": {
        borderColor: "white"
      }
    },
    paper: {
      marginTop: theme.spacing(8),
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: "#FFFFFF",
      color: RED
    },
    form: {
      width: "100%", // Fix IE 11 issue.
      marginTop: theme.spacing(1)
    },
    submit: {
      margin: theme.spacing(3, 0, 2)
    },
    darkModeColorInput: {
      color: WHITE
    },
    darkModeColorLabel: {
      color: "#212020",
      "&:after": {
        borderColor: "#212020"
      }
    }
  }));

文本输入：

            <TextField
              margin="normal"
              InputLabelProps={{
                className: classes.darkModeColorLabel
              }}
              InputProps={{
                className: classes.input
              }}
              InputLabelProps={{
                className: classes.input
              }}
              required
              fullWidth
              id="usernameOrEmail"
              label="username or email"
              name="usernameOrEmail"
              value={usernameOrEmail}
              onChange={e => {
                if (usernameOrEmailEmpty) {
                  setUsernameOrEmailEmpty(false);
                }

                if (error) {
                  clearAuthError();
                }

                setUsernameOrEmail(e.target.value);
              }}
              autoComplete="off"
              autoFocus
              error={usernameOrEmailEmpty && "Field cannot be empty"}
            />

{
如果（用户名或邮件为空）{
setUsernameOrEmailEmpty（false）；
}
如果（错误）{
clearAuthError（）；
}
setUsernameOrEmail（e.target.value）；
}}
自动完成=“关闭”
自动对焦
错误={usernameOrEmailEmpty&&“字段不能为空”}
/>

您可能必须增加css的特殊性，以覆盖材质UI中的聚焦状态

const getStyles = makeStyles(theme => ({
    focused: {
    },
    input: {
      borderBottom: "white",
      color: "white",
      "&$focused": {
        color: "green"
      }
    }
  }), { name: 'MuiTest' });

最相关的部分是

{name:“MuiTest”}

因为类名应该以

Mui开头，这样上述代码才能工作

“&$focused”
-用于访问同一样式表中的本地CSS样式规则的规则名称语法

参考资料：-



我已经在下面的游乐场创建了一个参考实现