首页 文章

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

提问于
浏览 次
1

我在我的React应用程序中使用了Materialize-CSS和CSS-Modules .

我想对输入字段使用默认样式，但是当我尝试应用下面链接的文档所指示的“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覆盖所有样式 . 显然，这是不方便和hacky .

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

有关变通方法或我可能做错的任何建议吗？

reactjs materialize css-modules

1 回答

  • 0

    只需将 classname: browser-default 给 <label> 和 <input> 标签，它就会变成默认的文本字段 .

    CodeSandbox - Input Field Demo

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

相关问题