Как применить стиль к заголовку диалога в Primeng? ⇐ CSS

[Anonymous]

Я использую Primeng версии 11 для своего проекта Angular 11. Я хочу стилизовать заголовок динамического диалогового окна, но не знаю, как это сделать.
Я пробовал headerStyle (ошибка, но contentStyle работает) и «:host::ng-deep», но это не работает.
Вот мой файл app.comComponent.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.comComponent.html

Код: Выделить всё

Мой файл app.comComponent.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», а затем попробовать свой собственный стиль в содержимом диалога, но это кажется неправильным.

Подробнее здесь: https://stackoverflow.com/questions/768 ... in-primeng