React | CSS-Modules | Materialize-CSS：.Browser-默认不应用

Question

我在我的React应用程序中通过CSS-Modules使用Materialize-CSS。

我想对输入字段使用默认样式，但当我尝试应用下面链接的文档所指出的" browser - default“时，输入字段仍然不能恢复为浏览器默认样式。

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 - Input Field Demo {.browser-default}

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