7

React と Material UI を学ぼうとしています。

私は Web フォームを作成していますが、これまでのところすべて問題ありませんが、ページが読み込まれると、以前に保存されたデータでクロムがテキスト フィールドに自動入力され、背景が黄色に変わります。どうすれば白く保つことができますか？

通常の CSS では、次のコードを含めることを知っています。

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

ただし、これが必ずしもスタイルシートを持っているとは限らないことを考えると、これは問題を引き起こします。

私はこれまでに持っています：

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;

コードの解析中に構文エラーが発生しinput-webkit-autofillます。

4

2 に答える 2

1

入力疑似スタイルを含む CSS ファイルを追加し、コンテナ div className を指定できます。このファイルを SPA html に含める必要があります。

たとえばCSSファイル...

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

次に、レンダリングコードで-

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

また、HTML ページに CSS ファイルを含めることを忘れないでください。

インデントが悪くてすみません。SOアプリを使用しています。

于 2015-12-23T06:41:51.823 に答える