如何仅在单个Angular PrimeNG组件中设置动态对话框的消息与图标样式？

问题核心是你直接使用全局::ng-deep选择器，未限定作用范围，导致样式污染了所有同类型组件。以下是具体修复方案：

步骤1：给目标对话框添加自定义类 #

在confirm配置中新增styleClass属性，指定唯一类名（比如delete-confirm-dialog），用于标记目标对话框：

onDelete(uuid: string): void {
  this.confirmationService.confirm({
    message: this.translateService.instant('DELETE_MESSAGE'),
    header: this.translateService.instant('CONFIRM'),
    icon: 'pi pi-exclamation-triangle',
    styleClass: 'delete-confirm-dialog', // 新增自定义类
    accept: () => {
      this.myServide.deleteSomething(uuid).subscribe(() => {
        this.messageService.add({
          severity: ToastSeverity.SUCCESS,
          summary: 'SUCCESS',
          detail: 'DELETED_MESSAGE',
          life: 3000,
        });
        this.getData();
      });
      this.confirmationService.close();
    },
    reject: () => {
      this.confirmationService.close();
    },
  });
}

步骤2：修改SCSS样式，限定作用范围 #

将全局::ng-deep改为结合:host和自定义类的写法，把样式作用范围严格限定在当前组件触发的目标对话框内：

:host ::ng-deep {
  .formFooter > div:nth-child(1) {
    right: 30px !important;
    height: 100px !important;
  }

  // 仅作用于带自定义类的确认对话框消息
  .delete-confirm-dialog.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
    color: #eb3b5a;
  }

  // 仅作用于该对话框内的感叹号图标
  .delete-confirm-dialog .pi-exclamation-triangle:before {
    color: #eb3b5a;
  }
}

原写法失效原因 #

• 单独使用::ng-deep未结合:host时，样式会脱离当前组件作用域，变成全局生效样式。
• 直接用.pi-exclamation-triangle:before选择器会匹配页面上所有使用该图标的元素，而非仅目标对话框内的图标。

通过以上修改，样式只会作用于当前组件触发的、带有自定义类的对话框，不会影响应用内其他对话框。

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