时间戳

首页 > 解决方案 > PrimeNG - 如何在 p-table 中为单个组件更改 pTemplate="caption" 的样式

angular - PrimeNG - 如何在 p-table 中为单个组件更改 pTemplate="caption" 的样式

问题描述

我想p-table只在一个组件中更改我的标题单元格的背景颜色，我该怎么做？

我试过了<ng-template pTemplate="caption" class="myStyle">

并 .myStyle{ background: rgb(9,169,121) !important; } 在 my.component.scss

但它不起作用。

帮我！谢谢！

编辑：终于成功了！我看到@Antikhippe 的答案，但我不得不添加

:host ::ng-deep { #myTable { .p
-datatable-thead{ 背景：红色；
} .p-datatable .p-datatable-thead > tr > th { 背景：继承；} } }

标签： angularsassprimengng-templatep-table

解决方案

pTemplate="caption"只适合你的表头的一部分，你必须p-datatable-header上课：

尝试这个：

:host ::ng-deep {
  #myTable {
    .p-datatable-header {
      background-color: red;
    }
  }
}

我包围p-datatable-header了类，#myTable仅将这个 CSS 应用于具有myTableid 的表：

<p-table id="myTable" [value]="products">

见StackBlitz

推荐阅读