如何为PrimeNG 11动态对话框的Header设置样式？

问题描述 #

在Angular 11项目中使用PrimeNG 11的动态对话框时，尝试通过headerStyle属性或:host ::ng-deep样式穿透设置Header样式均无效，但contentStyle可以正常生效。不想通过showHeader:false自定义Header的方式解决该问题。

相关代码示例 #

app.component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { DialogService } from 'primeng/dynamicdialog';
import {DemoDialogComponent} from './demo-dialog/demo-dialog.component'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
    constructor(public dialogService: DialogService) { }

    show() {
    this.dialogService.open(DemoDialogComponent, {
        header: 'This is just a demo',
        width: '50%',
        contentStyle: { 'background-color': '#555', 'color': 'white'},
        // headerStyle: {'background-color':'blue'}  -- 无效
    });
}
}

app.component.html

<button type="button" (click)="show()" pButton label="Show"></button>

app.component.css

:host ::ng-deep .p-dialog-header-close-icon{
    color:red; /* 无效 */
}

:host ::ng-deep .p-dialog-title{
    color: orange; /* 无效 */
}

解决方案 #

方法1：使用styleClass配合全局样式 #

动态对话框会挂载到body下，不受组件样式隔离影响，通过指定自定义类名，在全局样式文件中编写样式是最稳妥的方式：

1. 打开对话框时添加styleClass参数：

this.dialogService.open(DemoDialogComponent, {
    header: 'This is just a demo',
    width: '50%',
    contentStyle: { 'background-color': '#555', 'color': 'white'},
    styleClass: 'custom-dialog-header' // 自定义类名
});

2. 在项目根目录的styles.css（全局样式文件）中添加样式：

/* 设置Header背景 */
.custom-dialog-header .p-dialog-header {
    background-color: blue;
}

/* 设置标题颜色 */
.custom-dialog-header .p-dialog-title {
    color: orange;
}

/* 设置关闭按钮颜色 */
.custom-dialog-header .p-dialog-header-close-icon {
    color: red;
}

方法2：调整样式穿透的选择器优先级 #

如果不想使用全局样式，可以调整:host ::ng-deep的选择器，直接针对body下的对话框元素：

修改app.component.css中的样式：

::ng-deep body .p-dialog-header {
    background-color: blue;
}

::ng-deep body .p-dialog-title {
    color: orange;
}

::ng-deep body .p-dialog-header-close-icon {
    color: red;
}

注意：::ng-deep在Angular后续版本中已标记为废弃，但在Angular 11中仍可正常使用，后续升级项目建议优先使用方法1。

方法3：传入自定义Header模板 #

如果需要更灵活的Header布局和样式，可以直接传入模板引用作为Header内容，无需隐藏默认Header：

1. 在app.component.html中定义Header模板：

<ng-template #customHeader>
    <div style="background-color: blue; color: orange; padding: 0.75rem; display: flex; justify-content: space-between; align-items: center; width: 100%;">
        <span>This is just a demo</span>
        <button class="p-dialog-header-close p-link" (click)="closeDialog()">
            <span class="p-dialog-header-close-icon pi pi-times" style="color: red;"></span>
        </button>
    </div>
</ng-template>

<button type="button" (click)="show()" pButton label="Show"></button>

2. 在app.component.ts中获取模板并传入对话框配置：

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import {DemoDialogComponent} from './demo-dialog/demo-dialog.component'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
    @ViewChild('customHeader') customHeader!: TemplateRef<any>;
    dialogRef!: DynamicDialogRef;

    constructor(public dialogService: DialogService) { }

    show() {
        this.dialogRef = this.dialogService.open(DemoDialogComponent, {
            header: this.customHeader,
            width: '50%',
            contentStyle: { 'background-color': '#555', 'color': 'white'}
        });
    }

    closeDialog() {
        this.dialogRef.close();
    }
}

内容的提问来源于stack exchange，提问作者Nhut Truong