Angular Material：如何让mat-snackbar显示在所有dialog之上

核心思路 #

问题根源在于两者的容器使用了相同的Material基础类，导致后创建的元素层级更高。要解决这个问题，不能依赖元素的创建顺序，必须给Snackbar设置专属的层级标识，强制让它始终处于Dialog之上。

具体解决方案 #

1. 给Snackbar添加自定义面板类

在调用SnackBar打开方法时，指定一个自定义的panelClass：

this.snackBar.open('警告提示内容', '关闭', {
  panelClass: 'high-priority-snackbar',
  // 其他配置项（如duration、verticalPosition等）可按需添加
});

2. 全局样式中强制设置层级

在项目的全局样式文件（通常是styles.scss或styles.css）中，针对这个自定义类设置足够高的z-index，确保超过Material Dialog的默认层级（Dialog默认z-index为1000）：

.mat-snack-bar-container.high-priority-snackbar {
  z-index: 10000 !important;
}

• 使用!important是为了覆盖Material组件的默认内联或动态样式；
• 如果不想用!important，可以用更具体的选择器（比如body .mat-snack-bar-container.high-priority-snackbar）来提升样式权重。

为什么之前的方案无效？ #

• 单独使用panelClass未生效：因为Material组件的默认样式权重较高，自定义类的样式被覆盖了；
• 依赖元素顺序设置z-index：Snackbar和Dialog的创建顺序不固定，位置选择器（如:first-child）无法适配所有场景。

内容的提问来源于stack exchange，提问作者Manachem Martinov