css 如何在一个组件中设计动态对话框中的消息和图标?

rdrgkggo  于 2023-02-26  发布在  其他
关注(0)|答案(1)|浏览(119)

我尝试在此.ts文件中仅对消息图标属性一个对话框进行样式设置,而当我使用提供的.scss代码时,我正在对整个应用程序中想要的所有对话框进行样式设置。我认为我在使用ng-deephost选择器时出现了问题?
.ts:

onDelete(uuid: string): void {
    this.confirmationService.confirm({
      message: this.translateService.instant(
        'DELETE_MESSAGE',
      ),
      header: this.translateService.instant('CONFIRM'),
      icon: 'pi pi-exclamation-triangle',
      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();
      },
    });
  }

.标准配置文件:

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

::ng-deep .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
  color: #eb3b5a;
}

::ng-deep .pi-exclamation-triangle:before {
  color: #eb3b5a;
}
koaltpgm

koaltpgm1#

要显示该对话框,在HTML代码中必须包含以下内容:<p-confirmPopup></p-confirmPopup>
尝试使用自定义类:<p-confirmPopup styleClass="custom-class"></p-confirmPopup>
现在使用CSS如下:

::ng-deep .custom-class.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
  color: #eb3b5a;
}

相关问题