Стили не применяются к DataTable в угловом компоненте

Question

У меня есть угловой компонент с JS DataTable внутри него.

HTML для компонента похож на это:

<h3>Test</h3>

<table class="table table-striped table-bordered table-hover" #table id="table">
  <thead>
    <tr>
      <th *ngFor="let column of columns">{{column.name}}</th>
    </tr>
  </thead>
</table>

У меня есть файл css для компонента:

h3 {
  color: blue;
}

.paginate_button {
  padding: 100px;
}

Любой стиль, который я добавляю для таблицы, не применяется, но стиль для h3 - это!

Если я добавлю стиль .paginate_button к глобальному styles.css , стиль будет применен.

Чего мне не хватает?

Answer 1

JS DataTable сам по себе является компонентом, который имеет свой собственный файл CSS, поэтому стиль, который вы перезаписываете в своем файле компонента CSS, не отражается. Однако если мы напишем некоторый стиль в глобальном файле styles.css, он будет автоматически применен ко всем компонентам.

Класс paginate_button отсутствует в шаблоне вашего компонента. На самом деле он присутствует в JS DataTable. Таким образом, стиль не может быть изменен. Надеюсь, это имеет смысл. Спасибо.

Вы можете попробовать это в global style.css:

.paginate_button {
  padding: 100px !important;
}