PrimeNG p-dialog样式覆盖：如何为不同弹窗设置独立遮罩样式

解决方案 #

你之前的写法不生效是两个原因导致的：

1. styleClass属性是给对话框本身的容器加自定义类，而遮罩层是独立于对话框容器的同级DOM节点，无法通过对话框上的类选中遮罩
2. PrimeNG的p-dialog专门提供了maskStyleClass属性用于给遮罩层绑定自定义类，你需要用这个属性替代styleClass

具体操作步骤 #

1. 修改启动banner对应的p-dialog代码，添加maskStyleClass属性：

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

2. 在项目全局样式文件（通常为src/styles.css/styles.scss）中添加对应样式：

/* 仅作用于banner弹窗的遮罩 */
.banner-black-mask.p-component-overlay {
    background-color: #000;
    /* 若样式未生效可以加!important提高权重 */
    /* background-color: #000 !important; */
}

3. 删掉之前写的全局.p-dialog-mask.p-component-overlay样式，避免影响其他对话框。

补充说明 #

如果后续需要给p-confirmDialog单独配置遮罩样式，也可以用它自带的maskStyleClass属性，逻辑和p-dialog完全一致。

内容的提问来源于stack exchange，提问作者Geek