help(Snackbar): Change z-index of snackbar without affecting Dialogs

[FacuDN]

Hi, I need to change the z-index of the snackbar but im not able to do it.

I found that if I have the following class in styles.scss, I can indeed change the z-index but it also affects the Material Dialogs.

.cdk-overlay-container {
z-index: 99999999999999;
}

Any way I can only affect the Snackbars?

Thanks in advanced!

[crisbeto]

You can pass a panelClass to the snack bar config and only target that class with your z-index.

[FacuDN]

You can pass a panelClass to the snack bar config and only target that class with your z-index.

I have already tried that, but the z-index affects the content of the snackbar, not the container

css
.success-snackbar {
background-color: $success-color !important;
color: $white-color !important;
z-index: 999
}

And in ts
let config = new MatSnackBarConfig();
config.panelClass = ["success-snackbar"];

[crisbeto]

I see. Usually when we have a panelClass option it sets the class on the overlay wrapper, but for some reason the one of the snack bar sets it on the container.

[giahieu123456]

i have same problem

[dev054]

I'm facing the same problem with MatDialog and MatSelect. I want to reduce the z-index of MatDialog but keep the MatSelect one intact. Is that possible, even with a workaround? I'm stucked at this for a long 😢

[konstantinosftw]

I am dealing with the same issue. MatDialog has a backdropClass property that allow us to fiddle with the outer elements. But Snackbar doesn't.

[anthonyjuarezsolis]

Has anyone already found a solution to this?!