样式不适用于角度组件中的 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 文件中覆盖的样式没有得到反映的原因。但是，如果我们在全局 style.css 中编写一些样式，它会自动应用到所有组件中。

类paginate_button 不存在于组件的模板中。它实际上存在于JS DataTable 的组件中。所以风格不能改变。希望这是有道理的。谢谢。

你可以在全局 style.css 中试试这个：

.paginate_button {
  padding: 100px !important;
}