primeng p-dialog样式覆盖

Question

在app.component.html文件中加载应用程序时，会显示一个p-对话框，如下所示。

<div class="banner">
<p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" [baseZIndex]="10000" [showHeader]="false"
[draggable]="false" [resizable]="false">  
<banner (notify)="onNotify($event)"></banner> 
</p-dialog>
</div>

显示应用程序横幅。当这个对话框出现时，我必须将背景颜色重写为黑色。所以添加了如下的css

.p-dialog-mask.p-component-overlay {
background-color: #000;
} 

一旦对话框被关闭，我得到每个页面的正常启动显示。在页面中有几个删除功能，在相应的html中有如下的确认码。

<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>

这个确认使用相同的CSS .p-dialog-mask。P-component-overlay，这样就把背景变成了黑色。所以我试着用styleClass: background-color: #000删除背景色为黑色的css;

<div class="banner">
<p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" styleClass="bgColorChange" [baseZIndex]="10000" [showHeader]="false"
[draggable]="false" [resizable]="false">  
<banner (notify)="onNotify($event)"></banner> 
</p-dialog>
</div>

和

.bgColorChange {
background-color: #000;
} 

但这并没有覆盖css，它看起来是正常的背景。我如何为p-dialog应用2种不同的样式?由于黑色背景仅在应用程序加载时显示的应用程序横幅中，我认为我会应用于p-dialog标签，但它不会生效。如有任何意见，敬请垂询。

Answer 1

Try

p-dialog ::ng-deep .bgColorChange {
background-color: #000;
}