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

我正在尝试学习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 (
      

           

              

                  
              
              

                  
              
              

                  
              
          
});
module.exports = MyAwesomeReactComponent;

我在解析input-webkit-autofill代码时遇到语法错误.

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

例如:

background-color => backgroundColor

border-radius => borderRadius

但供应商前缀以大写字母开头(除外ms)

-webkit-box-shadow=> WebkitBoxShadow(大写W)

-ms-transition=> msTransition('ms'是唯一的小写供应商前缀)

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

所以在你的例子中:

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

现在,因为内联样式直接附加在标签上而不是使用选择器,我们必须将此样式放在标签本身而不是容器上.

要覆盖样式,请使用此处记录的inputStyle道具

编辑: 但这样做,你将丢失提示文本,因为它将被盒阴影覆盖.添加z-index提示文本可以解决这个问题!

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

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


  


  

---

注意:反应内联样式有一些限制,例如@media查询.要解决这个问题,您可以使用

谢谢巷议

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

• actionscrip
• bash
• c#
• c++
• c语言
• erlang
• flutter
• go
• golang
• java
• javascript
• lua
• node.js
• perl
• php
• python
• scala
• typescript

RankList | 热门文章

• 1使用noncopyable成员聚合类的初始化
• 2Eclipse Mars Java Decompiler
• 3pandas DataFrame.replace函数在datetime中被破坏
• 4Angular 2和MySQL概念
• 5Jsoup unescapes特殊人物
• 6Spring Boot Web应用程序中的角度路由
• 7尝试追加/替换数组元素时"对成员映射的模糊引用"
• 8Docker:已安装卷的权限
• 9SFINAE:std :: enable_if作为函数参数
• 10原型与 Flyweight设计模式
• 11BufferedReader readLine()方法返回boolean？
• 12R：PLM个人和时间固定效应，但没有其他回归因子
• 13错误:任务执行失败:ransformException
• 14逗号之后我不想要空格宽度 - 最佳做法？
• 15Java:字符串模式:如何为具有特殊字符的所有字符字符指定正则表达式
• 16如何在UITextField中添加图像和文本作为swift中心的占位符
• 17Rspec：如何创建模拟关联
• 18未初始化的常量Sprockets :: Rails(NameError)
• 19如何通过包管理器安装Swift包？
• 20mysql:mysql的wait_timeout,net_read_timeout和net_write_timeout变量是什么？