Я пытаюсь изменить цвет шрифта TextInput для пользовательского интерфейса материала, но это не работает. Он меняет цвет шрифта, когда я щелкаю (он становится белым), но когда я снова сосредотачиваюсь на вводе, он становится фиолетовым (цвет по умолчанию, который поставляется с пользовательским интерфейсом материала, когда я его загружал). Не уверен, что я делаю не так, любая помощь будет принята с благодарностью

Стили:

  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"}
            />
2
Mike K 19 Окт 2019 в 16:11

1 ответ

Лучший ответ

Возможно, вам придется повысить специфичность CSS, чтобы переопределить сфокусированное состояние в пользовательском интерфейсе материала.

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

1
Nithin Thampi 19 Окт 2019 в 18:49