PrimeNG datatable custom css

Question

I want to style the datatable header in my angular project. I am using PrimeNG components in my project. But I cannot style them. It doesn't override the styles.

I tried the solution of this primeNG - implement css style to dataTable, but it doesn't work for me.

I have a list-component and there is my 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>

My list-component.css doesn't override the styles. I want to change the color of the header for example. I copied the style out of the browser inspector too, but this didn't help too. I don't know how to change it. I tried a lot of things. Maybe someone knows.

Answer 1

Try something like this:

After adding CSS styles in list-component.css set the encapsulation in list-component.ts as ViewEncapsulation.None

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

Also import

import ViewEncapsulation from '@angular/core'.

Also set the custom CSS style as !important mentioned by Chandru answer.