7

我正在尝试学习 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解析代码时出现语法错误。

4

2 回答 2

6

如果你想用javascript写css，你必须把dashed-key-words变成camelCaseKeys

例如：

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

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

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

有关更多详细信息，请参阅react doc #inline-styles 部分

所以在你的例子中：

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

现在，因为内联样式直接附加在标签上而不是使用选择器，所以我们必须将此样式放在<input>标签本身上，而不是容器上。

要覆盖 的<input>样式<TextField>，请使用此处记录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>

注意：react 内联样式有一些限制，比如@media查询。为了解决这个问题，您可以使用<style>标签：有关更多示例，请参阅本文！

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

于 2015-12-30T19:54:36.810 回答
1

您可以添加一个带有输入伪样式的 CSS 文件，并为容器提供 div 类名。您应该在您的 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 回答