primeng p-dialog style overwrite-CodePudding

I have a p-dialog that shows up when the application loads up in app.component.html file as follows.

<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>

This displays the application banner. I had to override the background color to black when this dialog shows up. So added css as below.

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

Once the dialog is closed i get the normal primeng display for each page. Within the page there are couple of delete functionalites which has the confirmation code in the corresponding html as below.

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

this confirmation uses the same css .p-dialog-mask.p-component-overlay , so this in turn turns the background to black. So i tried to remove the css with background color as black by using styleClass : background-color: #000; in p-dialog for banner page as below:

<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>

and in css as follows:

.bgColorChange {
    background-color: #000;
}

But this is not overwriting the css and it appears normal background. How can i apply 2 different styles for p-dialog? Since the balck background is only in the application banner which shows up on application load i thought i would apply to the p-dialog tag but it doesnt take effect. Any inputs highly appreciated.

CodePudding user response：

Try

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