如何设置 p-dialog 的 p-header 样式，即整个 header 部分？

Question

我正在尝试为 primeng 对话框 p-dialog 组件的 p-header 设置样式，但一直卡在设置样式中。我希望整个 header 元素都是红色的，但只有我的文字变红了。这是我的代码片段：

这是我得到的结果：

这是期望的输出：

<p-dialog  [(visible)]="popup.visible">
  <p-header [ngStyle] = "{'background-color':'red'}">
    {{popup.header}}
  </p-header>
  {{popup.message}}
</p-dialog>

我也试过styleClass，ngClass，[style]也没有运气

 @Component({
    encapsulation: ViewEncapsulation.None
})

有效，但我不想禁用 viewEncapsulation。

Answer 1

只要您在 Primeng 组件的模板中没有此类，就无法从模板访问它们-component.css

对于这种情况，您需要一个 global/theme css 文件来覆盖 PrimeNG 中的样式。

或者您可以在组件 css 文件中使用 depricated 选择器 ::ng-deep，如下所示：

  :host ::ng-deep .ui-dialog .ui-dialog-titlebar {
      background-color: red;
  }

如何设置 p-dialog 的 p-header 样式，即整个 header 部分？

How to style p-header of p-dialog i.e the whole header part?

html

css

primeng

angular