如何避免p-dialog样式覆盖p-confirmdialog且仅在指定页面生效？

问题根因 #

PrimeNG的p-confirmdialog底层复用p-dialog的逻辑，遮罩层默认统一挂载到body节点下，且默认共享类名，所以直接通过组件标签选择器设置样式不会生效，你之前给组件加styleClass也只会作用于对话框容器本身，不会同步到遮罩层。

方案实现步骤 #

1. 给两类对话框的遮罩分别加专属自定义类
   PrimeNG的对话框组件提供了专门的maskStyleClass输入属性，用来给遮罩层绑定自定义类名，直接在组件标签上声明即可：

<!-- 普通p-dialog加自定义遮罩类 -->
<p-dialog maskStyleClass="common-dialog-mask" ...其他属性>
  ...内容
</p-dialog>

<!-- p-confirmdialog加自定义遮罩类 -->
<p-confirmdialog maskStyleClass="confirm-dialog-mask" ...其他属性>
</p-confirmdialog>

2. 实现仅首页p-dialog用黑色遮罩
   有两种实现方式，按需选择：

• 方式1：首页的p-dialog单独加专属遮罩类
  如果你仅首页的少数p-dialog需要黑色遮罩，直接给首页用到的p-dialog单独加maskStyleClass="home-dialog-mask"，其他页面的p-dialog不加即可，在全局样式文件（通常是src/styles.css/styles.scss）里写样式：

/* 首页专属dialog遮罩样式 */
.home-dialog-mask {
  background-color: #000 !important;
}

/* 全局confirm对话框遮罩样式 */
.confirm-dialog-mask {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

• 方式2：通过首页标识统一控制
  如果首页所有p-dialog都需要黑色遮罩，不想逐个加类，可以在首页组件的生命周期钩子中给body加全局标识类：

// 首页组件代码
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    document.body.classList.add('is-home-page');
  }

  ngOnDestroy(): void {
    document.body.classList.remove('is-home-page');
  }
}

然后全局样式写：

/* 仅首页的普通dialog遮罩用黑色 */
body.is-home-page .p-dialog-mask:not(.confirm-dialog-mask) {
  background-color: #000 !important;
}

/* 全局confirm对话框遮罩样式，优先级更高 */
.confirm-dialog-mask {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

注意事项 #

• 以上样式必须写在全局样式文件中，写在组件独立样式文件会因为Angular的视图封装机制无法作用到全局挂载的遮罩层。
• 如果遇到样式优先级不够的情况，可以在选择器前加body前缀提升优先级，不需要额外加!important也能生效。

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