Primeng datatable自定義css

我想樣式在我的角度項目中的數據表頭。我正在使用我的項目中的primeng組件。但我無法塑造他們。它不覆蓋樣式。我試過這個primeNG - implement css style to dataTable的解決方案，但它不適合我。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>

我的列表component.css不會覆蓋樣式。例如，我想更改標題的顏色。我也從瀏覽器檢查器中複製了樣式，但這也沒有幫助。我不知道如何改變它。我嘗試了很多東西。也許有人知道。

來源

2017-10-13 Anton Styopin

我會公佈我的答案。這是覆蓋你的表頭樣式的方法，試試這個希望這將是有幫助的 – Chandru

嘗試是這樣的：

在列表component.css添加CSS樣式後設置的封裝中list-component.ts as ViewEncapsulation.None

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

import ViewEncapsulat離子來自@角/核心。

還將自定義CSS樣式設置爲！Chandru提到的重要答案。

來源

2017-10-14 16:37:03 zulu

嘗試這樣的：該行的

末在你的CSS文件

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

來源

2017-10-13 12:36:17 Chandru

當您想要重寫第三方模塊的樣式時，通常需要解決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; 
}

瞭解更多關於暗影刺穿組合子在這裏：The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop

來源

2017-10-19 03:07:15

Primeng datatable自定義css

回答

相關問題