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:

const inputStyle = { WebkitBoxShadow: '0 0 0 1000px white inset' };
<TextField
    ...
    inputStyle={inputStyle}
/>

But in the recent version the inputStyle prop was removed and added InputProps instead.

I've tried to remove it this way, but the yellow background color still appears:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    ':-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 1000px white inset',
        backgroundColor: 'red !important'
    }
  },
  input: {
    ':-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 1000px white inset',
        backgroundColor: 'red !important'
    }
  }
};

const renderTextField = (props) => {
    const {
        classes,
        label,
        input,
        meta: { touched, error },
        ...custom
    } = props;

  return (
    <TextField
        label={label}
        placeholder={label}
        error={touched && error}
        helperText={touched && error}
        className={classes.root}
        InputProps={{
            className: classes.input
        }}
        {...input}
        {...custom}
    />
  );
}

renderTextField.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(renderTextField);

Schechinger

can you please share a link to code sandbox ??or mention how to replicate it – Modestia

Answer 1

The replacement for inputStyle would be inputProps:

const inputStyle = { WebkitBoxShadow: "0 0 0 1000px white inset" };
<TextField name="last_name" inputProps={{ style: inputStyle }} />

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 <TextField name="email" inputProps={{ className: classes.input }} />;
}
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 <TextField name="email" inputProps={{ className: classes.input }} />;
}
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 <TextField name="email" InputProps={{ classes: { input: classes.input } }} />;
}
export default withStyles(styles)(MyTextField);

Here is a working example with all of these approaches:

Taveda

Answer 2

You can add it to a theme on the overrides.

overrides: {
  MuiOutlinedInput: {
    input: {
      '&:-webkit-autofill': {
        '-webkit-box-shadow': '0 0 0 100px #000 inset',
        '-webkit-text-fill-color': '#fff'
      }
    }
  }
}

Aran

Thanks, I was exactly looking for this approach. – Allergic

Answer 3

While above answers worked for solid colors, I needed transparent one, which was being overriden by something so I found other answer on stackoverflow which worked:

  // Workaround to remove autofill color from inputs
  input, select {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text !important;
    background-clip:  text !important;
  }

Connotation