Question

我正在尝试学习React和Material UI。

我正在创建一个Web表单，到目前为止一切都很好，除非页面加载时，chrome自动用以前存储的数据填充文本字段，背景变为黄色。我怎样才能保持白色？

我知道在普通的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代码时遇到语法错误。

Answer 1

如果你想在javascript中编写css，你必须将dashed-key-words转换为camelCaseKeys

例如：

<fieldset> <legend>Ajouter une Classe</legend> <table> <tr> <th>Classe</th> <th>Selectionner</th> </tr> <tr> <td>12A</td> <td><input id="112A" onchange="addClasse('112A')" type= "checkbox"></td> </tr> <tr> <td>12A</td> <td><input id="212A" onchange="addClasse('212A')" type= "checkbox"></td> </tr> <tr> <td>12A</td> <td><input id="312A" onchange="addClasse('312A')" type= "checkbox"></td> </tr> </table> </fieldset> =＆gt; background-color
backgroundColor =＆gt; border-radius

但供应商前缀以大写字母开头（borderRadius除外）

ms =＆gt; -webkit-box-shadow（大写W）
WebkitBoxShadow =＆gt; -ms-transition（'ms'是唯一的小写供应商前缀）

有关详细信息，请参阅the react doc #inline-styles section

所以在你的例子中：

msTransition

现在，因为内联样式直接附加在标签上而不是使用选择器，所以我们必须将此样式放在const containerStyle = { WebkitBoxShadow: '0 0 0 1000px white inset' };标签本身，而不是容器上。

要覆盖<input> <input>样式，请使用<TextField>道具documented here

<强> 编辑： 但是这样做，你将丢失提示文本，因为它将被box-shadow覆盖。将inputStyle添加到提示文本可以解决此问题！

所以最后你的例子将是这样的：

z-index

注意：反应内联样式有一些限制，例如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>查询。要解决此问题，您可以使用@media标记：有关更多示例，请参阅this article。

顺便说一句，你可以使用一些autoprefixer（例如post-css）来为你做前缀工作。

Answer 2

您可以添加带有输入伪样式的CSS文件，并为容器div className。您应该在SPA html中包含该文件。

E.g。 CSS文件......

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

然后在你的渲染代码中 -

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

不要忘记在你的html页面中包含CSS文件！

对于糟糕的缩进道歉，我正在使用SO应用程序。

使用React和Material UI禁用自动填充表单

2 个答案: