Question

我正在尝试为材质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"}
            />

Answer 1

您可能必须提高css的特殊性，才能覆盖材料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/

我在下面的操场上创建了一个参考实现。

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

Focus属性不能与样式一起使用，而是在焦点样式起作用之前

1 个答案: