PrimeNG 数据表自定义 css
PrimeNG datatable custom css
我想在我的 angular 项目中设置数据表 header 的样式。我在我的项目中使用 PrimeNG 组件。但我不能设计它们。它不会覆盖样式。
我尝试了这个 primeNG - implement css style to dataTable 的解决方案,但它对我不起作用。
我有一个 list-component 并且有我的数据表:
<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>
我的 list-component.css 没有覆盖样式。例如,我想更改 header 的颜色。我也从浏览器检查器中复制了样式,但这也没有帮助。我不知道如何改变它。我尝试了很多东西。也许有人知道。
像这样尝试:
您的 css 文件中的行尾
p-datatable.beatDatatable .ui-datatable .ui-datatable-thead .ui-state-default {
color: #000 !important;
line-height: 2 !important;
text-align: center !important;
}
尝试这样的事情:
在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 描述的那样完成,也可以 或者 ,如果你不想禁用整个组件的视图封装,你可以使用 shadow-piercing descendant 组合器来定位特定的 class 你想要风格。
将 ::ng-deep 添加到要设置样式的 class 的末尾。例如:
HTML
<p-dataTable class="some-custom-class-name">
...
</p-dataTable>
风格
.some-custom-class-name::ng-deep th {
background-color: blue !important;
}
在此处阅读有关 Shadow-Piercing Combinators 的更多信息:The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop
我有同样的问题,我找到了一种方法,通过在 style.css 主文件中个性化 primeng 组件。这可能不是最好的做法,但它确实有效。 (并且可能以更恰当的方式,您可以使用数据 table 在您的组件旁边创建一个 scss/css 文件,您可以在其中覆盖样式,例如 data-table-override.scss
并将此文件导入你的主要 style.scss
使用 @import "components/my-component-using-datatable/data-table-override.scss";
你可以找到对应的 class 名称,只需使用浏览器检查工具分析 dom 即可。
我现在建议您使用 primeng 发布的新 turbo table,它更可定制,也更易于使用。
希望这对你有帮助:)
我想在我的 angular 项目中设置数据表 header 的样式。我在我的项目中使用 PrimeNG 组件。但我不能设计它们。它不会覆盖样式。
我尝试了这个 primeNG - implement css style to dataTable 的解决方案,但它对我不起作用。
我有一个 list-component 并且有我的数据表:
<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>
我的 list-component.css 没有覆盖样式。例如,我想更改 header 的颜色。我也从浏览器检查器中复制了样式,但这也没有帮助。我不知道如何改变它。我尝试了很多东西。也许有人知道。
像这样尝试:
您的 css 文件中的行尾
p-datatable.beatDatatable .ui-datatable .ui-datatable-thead .ui-state-default {
color: #000 !important;
line-height: 2 !important;
text-align: center !important;
}
尝试这样的事情:
在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 描述的那样完成,也可以 或者 ,如果你不想禁用整个组件的视图封装,你可以使用 shadow-piercing descendant 组合器来定位特定的 class 你想要风格。
将 ::ng-deep 添加到要设置样式的 class 的末尾。例如:
HTML
<p-dataTable class="some-custom-class-name">
...
</p-dataTable>
风格
.some-custom-class-name::ng-deep th {
background-color: blue !important;
}
在此处阅读有关 Shadow-Piercing Combinators 的更多信息:The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop
我有同样的问题,我找到了一种方法,通过在 style.css 主文件中个性化 primeng 组件。这可能不是最好的做法,但它确实有效。 (并且可能以更恰当的方式,您可以使用数据 table 在您的组件旁边创建一个 scss/css 文件,您可以在其中覆盖样式,例如 data-table-override.scss
并将此文件导入你的主要 style.scss
使用 @import "components/my-component-using-datatable/data-table-override.scss";
你可以找到对应的 class 名称,只需使用浏览器检查工具分析 dom 即可。
我现在建议您使用 primeng 发布的新 turbo table,它更可定制,也更易于使用。
希望这对你有帮助:)