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

【问题标题】：PrimeNG - How to change the style of pTemplate="caption" in p-table for a single componentPrimeNG - 如何在 p-table 中为单个组件更改 pTemplate="caption" 的样式
【发布时间】：2021-02-19 12:38:40
【问题描述】：

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

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

和.myStyle{ background: rgb(9,169,121) !important; } 在我的.component.scss

但它不起作用。

帮帮我！谢谢！

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

:主机::ng-deep { #myTable {
.p-数据表头{ 背景：红色；
} .p-datatable .p-datatable-thead > tr > th { 背景：继承； } } }

【问题讨论】：

结果很糟糕，因为整个“标题”单元格的背景没有着色，而只是中间一行。无论如何感谢您的回复。

标签： angular sass primeng ng-template p-table

【解决方案1】：

pTemplate="caption" 只适合您的表头的一部分，您必须使用p-datatable-header 类：

试试这个：

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

我用#myTable 包围了p-datatable-header 类，以便将此CSS 仅应用于具有myTable id 的表：

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

见StackBlitz

【讨论】：

您可以在我的StackBlitz 中看到它有效，您是否已将id 属性添加到您的表中？
我看到在您的 StackBlitz 中它可以工作，但在我的情况下它不起作用。在你告诉我的内容中，我必须添加 .p-datatable .p-datatable-thead > tr > th { background: inherit; }