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.

Answer 2

When you want to override styles of third party modules, quite often you need to work around the view encapsulation Angular emulates. This can either be done as Zulu described or alternatively, if you do not want to disable view encapsulation for the entire component, you can use the shadow-piercing descendant combinator to target the particular class you want to style.

Add ::ng-deep to the end of the class you want to style. For example:

HTML

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

Style

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

Read more about Shadow-Piercing Combinators here: The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop