As you open a dialog using the open method, you can add configuration to the dialog you want to have. You can see all the available MatDialogConfig
properties here - https://material.angular.io/components/dialog/api.
In this case, you can create your custom backdrop class by adding it to the config.
let dialogRef1 = dialog.open(MyDialogComponent, {
backdropClass: 'backdrop-class-name-1'
});
Then you can use ng-deep to add the stylings that you want.
::ng-deep {
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
.backdrop-class-name-1 {
opacity: 0;
}
}
}
Then for the other dialog, you just need to change the name of the backdropClass.
let dialogRef2 = dialog.open(MyDialogComponent, {
backdropClass: 'backdrop-class-name-2'
});
Then apply the styles
::ng-deep {
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
.backdrop-class-name-2 {
opacity: 1;
}
}
}
In this way, the two dialogs won't affect each other using ng-deep
.