javascript - 焦点属性不适用于样式，但在焦点样式起作用之前

Question

我正在尝试更改 Material ui 的 TextInput 的字体颜色，但它不起作用。当我点击离开时它会改变字体颜色(它变成白色)，但是当我再次关注输入时，它会变成紫色(我下载 Material 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"}
            />

Answer 1

您可能必须增加 css 的特异性才能覆盖 Material UI 中的焦点状态。

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

最相关的部分是...

{ name: "MuiTest"} 因为类名应该以 Mui 开头，上面的代码才能工作。

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

引用资料:-

https://material-ui.com/customization/components/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet

https://material-ui.com/styles/advanced/

我在下面的 Playground 创建了一个引用实现。

https://stackblitz.com/edit/react-akba9p?file=index.js