Блог

У меня есть похожая страница входа в систему, созданная с помощью material-UI, но в моем коде есть отличия от исходного. На самом деле, проблема начинается, когда я нажимаю на текстовое поле. Будут показаны старые входные данные, и я выбираю один из них, фон текстового поля становится белым. Кроме того, если при первом входе на страницу входа в Chrome сохраняются пароли, он автоматически делает фон белым путем автозаполнения. Тема моей страницы входа в систему темная и выглядит плохо. Как я могу сделать фон текстового поля таким же, как на странице входа в Material-UI?

Вот моя часть кода:

 
const CssTextField = withStyles({
  root: {
    'amp; .MuiInput-underline:after': {
      borderBottomColor: 'yellow',
    },
    'amp; .MuiOutlinedInput-root': {
      'amp; fieldset': {
        borderColor: 'white',
      },
      'amp;:hover fieldset': {
        borderColor: 'white',
      },
      'amp;.Mui-focused fieldset': {
        borderColor: 'yellow',
      },'amp;.Mui-focused ': {
        
      },
    },
  },
})(TextField);

export default function SignIn(props) {


  return (
 <form className={classes.form} noValidate>
          <CssTextField
            focused={true}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="userName"
            name="text"
            type="text" 
            {...username}
            autoComplete="text"
            autoFocus
            InputLabelProps={{
              style: { color: '#fff' },
            }}
            InputProps={{
              style: {
                  color: "red"
              }
          }}
          
          />
    </form>
)


}

 

Это выглядит так:

Это решение:

 const styles = { WebkitBoxShadow: "0 0 0 1000px white inset" };
<CssTextField inputProps={{ style: inputStyle }} />
 

Имейте в виду, что в material-ui есть разница между inputProps и InputProps. Заглавная буква I изменяет компонент, который обертывается вокруг собственного ввода, а строчная буква i манипулирует собственным вводом.