Can someone help me with styling the message and icon properties of just a single dialog in this .ts file? I'm encountering an issue where the provided .scss code is affecting the styling of all dialogs throughout the entire app, which is not what I intended. I suspect I may be misusing the ng-deep or host selectors?
.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();
},
});
}
.scss:
: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;
}