Question

我在我的带有CSS模块的React应用程序中使用Materialize-CSS。

我想对输入字段使用默认样式，但是当我尝试按下面链接的文档所示应用“浏览器默认值”时，输入字段仍不会恢复为浏览器的默认样式。

https://materializecss.com/helpers.html#browser-default

[
    {
        "name": "alpha",
        "password": "123",
        "id": 4
    },
    {
        "name": "beta",
        "password": "123",
        "id": 5
    }
]

我发现唯一接近的解决方案是用！important覆盖所有样式。显然，这是不便和不便。

import mStyles from 'materialize-css/dist/css/materialize.min.css';
 <Field
  label="EMAIL"
  name="email"
  inputStyle={`${styles.input} ${mStyles['browser-default']}`}
 />

是否有任何解决方法建议或我可能做错了什么？

Answer 1

只需将classname: browser-default赋予<label>和<input>标记，它将像默认文本字段一样。

CodeSandbox - Input Field Demo {.browser-default}

<label className="browser-default">First Name</label>
<input
  placeholder="Enter name"
  type="text"
  className="browser-default"
/>

反应| CSS模块| Materialize-CSS：未应用.browser-default

1 个答案: