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

Question

我想更改 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{ background: red;
} .p-datatable .p-datatable-thead > tr > th { background: inherit; } } }

Answer 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