Angular Material -make the matsnackbar above all dialogs

I have a Warning mat-snackbar And I have a dialog.
my problem is that the dialog appears above the mat-snackbar and hides it.
Because the wrapping div uses the same material class And material make the last dialog above the others

To use "panelClass" its not helping
Apply global css to the wrapper class
Make the first class child with a Higher z-index (it's not good - because some times it will be second)

There is no way to control the order of Angular's cdk-overlay containers.
Also, there is no way to add a custom class to the overlay itself, but to its child only - which is not helpfull in your case, since you want to increase the z-index value of the paren. The parent is also not controlable via the panelClass property supplied by Angular-Material.

The only solution I can see in this case is, to display the snack bar later in time after displaying the dialog.
If you already displayed the snack-bar and then opened the dislog, I recommend you in this case to dismiss the snack-bar and re-show it. In this way you'll make sure that the snack bar is logically always the latest overlay, and will be displayed above all other overlay containers.