Disable autofill forms with React and Material UI

Question

I am trying to learn React and Material UI.

I am creating a web form and so far everything is good, except when the page loads, chrome auto fills the text fields with previously stored data and the background changes to yellow. How can I keep it at white?

I know in normal CSS I would include this code:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

However given that this I do not necessarily have a style sheet this presents an issue.

I have so far:

const MyAwesomeReactComponent = React.createClass({
const containerStyle = 
    {
      /* input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
          } */
    };
 return (
      <div style={containerStyle}>
           <form action="/login" method="post" autocomplete ="off">
              <div>
                  <TextField hintText="Email Field" floatingLabelText="Email"  underlineFocusStyle={{borderColor: Colors.amber900}} />
              </div>
              <div>
                  <TextField hintText="Password Field" floatingLabelText="Password" type="password" />
              </div>
              <div>
                  <RaisedButton label="Submit" primary={true}/>
              </div>
          </form>
});
module.exports = MyAwesomeReactComponent;

I am getting a Syntax error while parsing through the input-webkit-autofill code.

Answer 1

If you want to write css in javascript, you have to turn dashed-key-words into camelCaseKeys

For example:

• background-color => backgroundColor
• border-radius => borderRadius

but vendor prefix starts with capital letter (except ms)

• -webkit-box-shadow => WebkitBoxShadow (capital W)
• -ms-transition => msTransition ('ms' is the only lowercase vendor prefix)

see the react doc #inline-styles section for more details

So in your example:

const containerStyle = {
  WebkitBoxShadow: '0 0 0 1000px white inset'
};

Now, because inline styles gets attached on tags directly instead of using selectors, we have to put this style on the <input> tag itself, not the container.

To override the <input> style of <TextField>, use the inputStyle prop documented here

EDIT: But doing this, you'll lose the hint text, because it will be covered by the box-shadow. Adding z-index to the hint text can fix this!

so finally your example will be like this:

const hideAutoFillColorStyle = {
  WebkitBoxShadow: '0 0 0 1000px white inset'
};
const hintStyle = { zIndex: '1' };

<div>
  <TextField
    hintText="Email Field"
    floatingLabelText="Email"
    underlineFocusStyle={{borderColor: Colors.amber900}}
    inputStyle={hideAutoFillColorStyle}
    hintStyle={hintStyle} />
</div>
<div>
  <TextField
    hintText="Password Field"
    floatingLabelText="Password"
    type="password"
    inputStyle={hideAutoFillColorStyle}
    hintStyle={hintStyle} />
</div>

---

Note: react inline styles have some limitations, such as @media queries. To get around this, you can use <style> tags: See this article for more examples!

BTW you can use some autoprefixer (such as post-css) to do the prefixing job for you.

Answer 2

You can add a CSS file with the input pseudo styles and give the container div className. You should include the file in your SPA html.

E.g. the CSS file...

.formcontainer input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; }

Then in your render code -

<div className="formcontainer"><form ...>

And don't forget to include the CSS file in your html page!

Apologies for bad indentation, I'm using SO app.