primeng p-对话框样式覆盖

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

，因此这又将背景变为黑色。因此，我尝试通过在横幅页面的 p-dialog 中使用

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>

在CSS中如下：

.bgColorChange {
    background-color: #000;
} 

但这并没有覆盖CSS，它看起来是正常的背景。

如何为 p-dialog 应用 2 种不同的样式？由于黑色背景仅出现在应用程序横幅中，该横幅在应用程序加载时显示，我想我应该应用于 p-dialog 标签，但它不会生效。

任何意见都将受到高度赞赏。

Answer 1

尝试

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