如何在Primeng中将样式应用到对话框标题？

Question

我在 Angular 11 项目中使用 Primeng 版本 11。我想设置动态对话框标题的样式，但不知道如何操作。

我尝试过 headerStyle （错误但 contentStyle 有效）和“:host ::ng-deep”，但它不起作用。

这是我的 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'}  -- Not Working
    });
}
}

我的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; /* Not Working */
}

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

如何设置标题样式？我可以尝试“showHeader:false”，然后在对话框的内容中尝试我的自定义样式，但它似乎不正确。

Answer 1

您可以利用

styleClass

属性修改动态对话框标题的外观。这允许您定义一个特定的类，然后您可以将其应用于对话框组件以自定义其标题。

1. 打开对话框时：

  this.dialogService.open(DemoDialogComponent, {
        header: 'This is just a demo',
        width: '50%',
        contentStyle: { 'background-color': '#555', 'color': 'white'},
        styleClass:'testDialog' // this class will be added to the dialog component
    });

2. 在

   DemoDialogComponent

   文件中的

   SCSS

   内：

 ::ng-deep .testDialog {
  .p-dialog-header{
    .p-dialog-title{
      color:red
    }
    .p-dialog-header-icons{
      .p-dialog-header-icon{
        color:red
      }
    }
  }
}

我使用

styleClass

属性来选择所需的对话框。