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

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 }}
            />