Реагировать |CSS-модули |Materialize-CSS: .browser-default не применяется - PullRequest
Новая
       9

Реагировать |CSS-модули |Materialize-CSS: .browser-default не применяется

0 голосов
/ 20 октября 2018

Я использую Materialize-CSS в своем приложении React с CSS-модулями.

Я хотел бы использовать стиль по умолчанию для полей ввода, но когда я пытаюсь применить «браузер по умолчанию», как указано в документации, приведенной ниже, поля ввода по-прежнему не возвращаются к стилям браузера по умолчанию.

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']}`}
 />

Единственное решение, которое я нашел, - это перезаписать все стили!Очевидно, это неудобно и взломано.

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

Есть предложения об обходном пути или что я могу сделать не так?

1 Ответ

0 голосов
/ 20 октября 2018

Просто присвойте теги classname: browser-default <label> и <input>, и он станет похожим на текстовое поле по умолчанию.

CodeSandbox - демонстрация поля ввода {.browser-default}

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