反应 |CSS 模块 |Materialize-CSS:未应用浏览器默认值

Question

我正在我的 React 应用程序中使用 Materialize-CSS，其中包含 CSS-Modules。

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

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

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

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

.input:focus {
border-bottom: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

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

Answer 1

只需classname: browser-default给<label>和<input>标签，它就会变得就像一个默认的文本字段。

CodeSandbox - 输入字段演示 {.browser-default}

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