PrimeNG 数据表自定义 css



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

我尝试了这个 primeNG 的解决方案 - 将 css 样式实现到 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>

我的列表组件.css不会覆盖样式。例如,我想更改标题的颜色。我也从浏览器检查器中复制了样式,但这也没有帮助。我不知道如何改变它。我尝试了很多东西。也许有人知道。

尝试这样的事情:

在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。

当您想要覆盖第三方模块的样式时,通常需要绕过 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;
}
在此处阅读有关Shadow-Piercing

Combinators的更多信息:New Angular ::ng-deep 和Shadow-Piercing Combinators Drop

尝试如下:

CSS 文件中的行尾

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

我有同样的问题,我找到了一种方法,通过在主样式.css文件中个性化primeng组件来做到这一点。 这可能不是最好的好做法,但它有效。(并且可能以更正确的方式,您可以使用DataTable在组件旁边创建一个SCSS/CSS文件,您可以在其中覆盖样式,例如data-table-override.scss,只需使用@import "components/my-component-using-datatable/data-table-override.scss";将此文件导入主style.scss你可以找到相应的类名,只需使用浏览器检查工具分析 DOM 即可。我建议你现在使用primeng发布的新涡轮增压表,它更可定制,更易于使用。希望这对您有帮助:)

最新更新