How can I apply -webkit-autofill using MUI on React?

Question

I read about -webkit-autofill editing background from 'https://stackoverflow.com/questions/57210325/material-ui-change-autofill-background-color-in-textfield'

I tried to apply this to my app and have no clue where I need to add this.

 "&:-webkit-autofill": {
  WebkitBoxShadow: "0 0 0 1000px black inset",
}

Here is my code. I applied to input theme. However, it does not change anything.

// Styling TextField
const ValidationTextField = withStyles({
  root: {
    '& input:valid + fieldset': {
      borderColor: 'orange',
      borderWidth: 1,
    },
    '& .MuiOutlinedInput-root':{
      '&:hover fieldset': {
        borderColor: 'orange'
      },
      '&.Mui-focused fieldset': {
        borderColor: 'orange',
      },
    },
    '& input:invalid + fieldset': {
      borderColor: 'orange',
      borderWidth: 1,
      backgroundColor: 'black',
    },

    '& input:valid:focus + fieldset': {
      borderColor: 'orange',
      borderLeftWidth: 5,
      padding: '4px !important', // override inline-style
    },
  },
})(TextField);

//Style MUI
const useStyles = makeStyles((theme) => ({
  root: {
    height: '100vh',
    backgroundColor: 'black',
  },
  input: {
    color: 'orange',
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 1000px black inset",
    }
  },
  formBackground: {
    background: 'black',
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
  },
  form: {
    width: '100hv',
    height: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(0),
    color: 'orange',
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

//Label Style
const useLabelStyles = makeStyles({
  root: {
    
    color: 'orange',
    '&.Mui-focused': {
      color: 'orange',
    },
    fontSize: '14px',
  },
});

          <form className={classes.form} noValidate>
            <ValidationTextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              id='email'
              label='Email Address or ID' //language support
              value={login}
              onChange={handleChange}
              name='login'
              autoFocus
              InputProps={{
                className: classes.input,
              }}
              InputLabelProps={{ classes: labelClasses }}
            />
            <ValidationTextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              name='password'
              label='Password'
              value={password}
              onChange={handleChange}
              type='password'
              id='password'
              InputProps={{
                className: classes.input,
              }}
              InputLabelProps={{ classes: labelClasses }}
            />

score 1 · Accepted Answer · answered Jun 27 '20 at 09:33

1

InputProps={{
  classes: {input: classes.input}
}}

You can check the DevTools to figure out which MUI global class is applying certain styles to certain elements and then check the documentation on how to add or override styles

answered Jun 27 '20 at 09:33

hotpink

2,882
1
12
15

1

I attached the dev element tool. I tried to apply the style on my attributes, however, nothing can override input:-internal-autofill-selected – chichi Jun 27 '20 at 10:07
1

you can add this to your form wrapper `"& input:-internal-autofill-selected": {...}` – hotpink Jun 27 '20 at 10:31

How can I apply -webkit-autofill using MUI on React?

1 Answers1