Material UI remove the yellow background on TextField autofill

Question

I\'m having a really hard time to remove the yellow background on autofill from the Material UI TextField component.

In older versions I did it this way:

<         


        

Answer 1

The replacement for inputStyle would be inputProps:

const inputStyle = { WebkitBoxShadow: "0 0 0 1000px white inset" };

InputProps vs. inputProps is a common point of confusion. Uppercase "I" InputProps provides props for the Input element within TextField (Input wraps the native input in a div). Lowercase "i" inputProps provides props for the native input element rendered within the Input component. If you want to provide inline styles to the native input element, the code example above will do the trick.

There are also several other ways to do this using classes via withStyles.

If you want to use the className property, again this needs to be on the input (rather than the div wrapping it) in order to have the desired effect. So the following will also work:

const styles = {
  input: {
    WebkitBoxShadow: "0 0 0 1000px white inset"
  }
};
const MyTextField = ({classes}) => {
   return ;
}
export default withStyles(styles)(MyTextField);

If you want to leverage the ":-webkit-autofill" pseudo-class, you just need to adjust your JSS syntax and add the "&" to reference the selector of the parent rule:

const styles = {
  input: {
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 1000px white inset"
    }
  }
};
const MyTextField = ({classes}) => {
   return ;
}
export default withStyles(styles)(MyTextField);

You can also leverage either of these class approaches, but using uppercase "I" InputProps via the classes property:

const styles = {
  input: {
    WebkitBoxShadow: "0 0 0 1000px white inset"
  }
};
const MyTextField = ({classes}) => {
   return ;
}
export default withStyles(styles)(MyTextField);

Here is a working example with all of these approaches: