css - PrimeNG数据表自定义CSS

Question

我想在我的角度项目中设置数据表标题的样式。我在项目中使用PrimeNG组件。但是我不能给它们定型。它不会覆盖样式。

我尝试了这个primeNG - implement css style to dataTable的解决方案，但对我而言不起作用。

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

<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没有覆盖样式。例如，我想更改标题的颜色。我也从浏览器检查器中复制了样式，但这也无济于事。我不知道该如何更改。我尝试了很多事情。也许有人知道。

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。