样式未应用于角度组件中的数据表

Question

我有一个角度组件，里面有JS数据表。

该组件的 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样式添加到全局样式中.css则会应用该样式。

我错过了什么？

Answer 1

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

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

您可以在全局样式中尝试此操作.css：

.paginate_button {
padding: 100px !important;
}