PrimeNG 数据表自定义 css

Question

我想在我的角度项目中设置数据表标题的样式。我在我的项目中使用 PrimeNG 组件。但我无法为它们设计样式。它不会覆盖样式。

我尝试了这个 primeNG 的解决方案 - 对 dataTable 实现 css 样式，但它对我不起作用。

我有一个列表组件，并且有我的数据表：

 <p-dataTable #dt [value]="auftraege" [rows]="10" [paginator]="true" [(first)]="first" [sortMode]="multiple"
           [loading]="loading" loadingIcon="fa-spinner" class="beatDatatable">
<p-header>{{auftraege.length}} Aufträge</p-header>
<p-column field="cat" header="Datum/Uhrzeit" [sortable]="true">
  <ng-template pTemplate="body" let-order="rowData">
    {{order.cat | date:'yMdjm'}}
  </ng-template>
</p-column>
<p-column field="schadennummer" header="Schadennummer" [sortable]="true"></p-column>
<p-column field="kennzeichen" header="Kennzeichen" [sortable]="true"></p-column>
<p-column field="jobId" header="Euconnr." [sortable]="true"></p-column>
<p-column field="externeid" header="Auftragsnr." [sortable]="true"></p-column>
<p-column field="status.anzeige" header="Status" [sortable]="true"></p-column>
</p-dataTable>

我的 list-component.css 不会覆盖样式。例如，我想更改标题的颜色。我也从浏览器检查器中复制了样式，但这也没有帮助。我不知道如何改变它。我尝试了很多东西。也许有人知道。

原文由 Anton Styopin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这样的事情：

在 list-component.css 中添加 CSS 样式后，将 list-component.ts 中的封装设置为 ViewEncapsulation.None

 @Component({
  selector: '<selector-name>',
  templateUrl: './list-component.html',
  styleUrls:['./list-component.css'],
  encapsulation : ViewEncapsulation.None
})

同时导入

import ViewEncapsulation from '@angular/core'.

还将自定义 CSS 样式设置为 Chandru 回答中提到的 !important 。

原文由 zulu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当您想要覆盖第三方模块的样式时，您通常需要绕过 Angular 模拟的视图封装。这可以像 Zulu 描述的那样完成， 或者，如果您不想禁用整个组件的视图封装，您可以使用阴影穿透后代组合器来定位您想要设置样式的特定类。

将 ::ng-deep 添加到要设置样式的类的末尾。例如：

HTML

 <p-dataTable class="some-custom-class-name">
    ...
</p-dataTable>

风格

.some-custom-class-name::ng-deep th {
    background-color: blue !important;
}

在此处阅读有关 Shadow-Piercing 组合器的更多信息： 新的 Angular ::ng-deep 和 Shadow-Piercing 组合器 Drop

原文由 Michael Burford 发布，翻译遵循 CC BY-SA 3.0 许可协议