Primeng datatable custom 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> 

내리스트 component.css를이 스타일을 무시하지 않습니다. 예를 들어 머리글의 색을 변경하고 싶습니다. 브라우저 검사기에서 스타일을 복사했지만 너무 도움이되지 않았습니다. 나는 그것을 어떻게 바꿀 지 모른다. 나는 많은 것을 시도했다. 어쩌면 누군가는 알고 있습니다.

Answer 1

을이 같은 시도 :리스트 component.css를에 CSS 스타일을 추가 한 후

을에 캡슐을 설정 ViewEncapsulation.None으로 list-component.ts를 입력하십시오.

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

import ViewEncapsulat @ angular/core의 이온.

또한 사용자 정의 CSS 스타일을 Chandru answer에서 언급 한! important로 설정하십시오.

Answer 2

다음과 같이하십시오 : 라인의

끝을 CSS 파일

p-datatable.beatDatatable .ui-datatable .ui-datatable-thead .ui-state-default { 
    color: #000 !important; 
    line-height: 2 !important; 
    text-align: center !important; 
} 

Answer 3

타사 모듈의 스타일을 덮어 쓰려면보기 캡슐화를 사용해야합니다. 각도는 에뮬레이트합니다. Zulu가 설명한대로 또는 으로 수행 할 수 있습니다. 전체 구성 요소에 대한보기 캡슐화를 사용하지 않으려면 섀도 피어싱 자손 결합자를 사용하여 스타일을 지정하려는 특정 클래스를 대상으로 지정할 수 있습니다.

스타일을 지정하려는 클래스의 끝에 :: ng-deep를 ​​추가하십시오. 예를 들어 :

HTML

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

스타일

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

여기에 그림자 - 피어싱 콤비에 대한 자세한 내용 : The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop