Свойство «Фокус» не работает со стилями, но до работы стиля фокуса

Question

Я пытаюсь изменить цвет шрифта 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"}
            />

Answer 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-in-the-same-style-sheet

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

Я создал эталонную реализацию на игровой площадке ниже.

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