Переопределение стиля компонента React bootstrap

Question

Я импортировал компонент Table из react-bootstrap и хочу использовать его в своем проекте. Однако мне очень трудно переопределить стилизацию этого компонента по умолчанию. Единственный способ сделать это - добавить !important в конец каждой строки, однако я думаю, что должен быть лучший способ.

Вот так выглядит мой компонент Table:

<Table striped bordered hover>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
</Table>

И вот как выглядит мой CSS файл:

th {
  text-align: center;
  border: none !important;
}

И без! Важный он пытается сохранить границу (один из многих случаев).

Answer 1

Вот так работают предустановленные библиотеки компонентов; они обычно имеют более высокую специфичность для css, чем просто один слой, как у вас. Пример псевдо:

table {
  thead {
    tr {
      th {
        border: 1 px solid black;
      }
    }
  }
}

, который превосходит вашу единственную вложенную цель css. !important следует использовать только в случае крайней необходимости (IMO). Другой вариант - написать свой собственный, в равной степени указанный c css и использовать его для переопределения того, что предоставляет react-bootstrap. Это просто цена, которую вы платите за использование таких библиотек.