Реактивный бутстрап должен пометить каждый пользовательский класс как! Важный

Question

Я создаю базовую форму и считаю невозможным переопределить какие-либо элементы начальной загрузки без использования! Важный.Например, базовая форма с вводом имени с использованием пользовательского класса «custom-input»

.js

<Form>
  <Row>
    <Col>
      <Form.Group>
         <Form.Control
            type="name"
            placeholder="First Name"
            className="custom-input"
          />
      </Form.Group>
   </Col>
 </Row>
</Form>

.css

.custom-input{
    border: 0
}

This не удаляет границу, если я не добавлю !important к ней.Почему это требует! Важно?

Answer 1

Вместо того, чтобы пытаться сражаться с классами по умолчанию с помощью пользовательских классов.Вы можете использовать инструменты разработки и посмотреть, как он рендерится на внешнем интерфейсе и стилизовать эти классыНапример:

<Form.Group controlId="formBasicEmail">
  <Form.Label>Email address</Form.Label>
  <Form.Control type="email" placeholder="Enter email" />     
</Form.Group>

Становится:

<div class="form-group">
  <label class="form-label" for="formBasicEmail">Email address</label>
  <input placeholder="Enter email" type="email" id="formBasicEmail" class="form-control">
</div>

Так что вы можете просто написать css:

.form-control {
    border: 0;
}

Таким образом, вы можете стилизовать то, что они используют в реакции.компоненты начальной загрузки вместо попытки переопределить каждый стиль.Таким образом, вам не нужно использовать !important

. Или вы можете дважды проверить, что ваш CSS ниже стиля начальной загрузки, поэтому вы можете переопределить стиль.

Answer 2

Вы должны понимать, как работает порядок применения стилей CSS.В основном есть четыре правила:

• встроенные CSS переопределяют правила CSS в теге стиля и файле CSS
• более специфический селектор имеет приоритет над менее специфичным
• правил, которые появляются позже в коде, переопределяют более ранние правила, если оба имеют одинаковую специфику.
• Правило css с! Важным всегда имеет приоритет.

Также естьявляются весами селекторов, приоритеты которых стили:

• 1000 пунктов встроенного стиля
• 100 очков для идентификаторов
• 10 очков для классов и псевдоклассов
• 1 балл для селекторов тегов и псевдоэлементов

Проверьте этот ответ для более подробной информации о том, как работает порядок применения CSS.Также проверьте this , как правильно настроить загрузчик.