primeng p-dialog style overwrite - css

Question

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.

Answer 1

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