样式未应用于 angular 组件中的 DataTable

Question

我有一个 angular 组件，里面有 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;
}

我为 table 添加的任何样式均未应用，但为 h3 添加的样式适用！

如果我将 .paginate_button 样式添加到全局 styles.css，则会应用该样式。

我错过了什么？

Answer 1

JS DataTable 本身就是一个组件，它有自己的 css 文件，这就是为什么你在组件 css 文件中覆盖的样式不是得到反映。但是，如果我们在全局 styles.css 中编写一些样式，它会自动应用到所有组件中。

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

您可以在全局中尝试此操作 style.css:

.paginate_button {
  padding: 100px !important;
}

样式未应用于 angular 组件中的 DataTable

Styling not applied to DataTable in angular component

datatables

angular-components

angular