Angular 16中SnackBar的panelClass不生效问题排查

问题根源 #

你的代码里自定义样式不生效的核心原因是Material SnackBar的默认样式优先级高于你定义的全局样式。Angular Material的SnackBar使用mdc-snackbar__surface类控制容器背景，这个类的样式规则会覆盖你直接定义的.red-snackbar样式。

具体代码问题 #

你在styles.scss中定义的.red-snackbar选择器过于宽泛，无法覆盖Material内置的更具体的样式规则。比如Material默认的样式是：

.mdc-snackbar__surface {
  background-color: var(--md-sys-color-surface-container);
  /* 其他默认样式 */
}

该选择器优先级与你的.red-snackbar相同，但因Material样式的加载顺序或变量优先级更高，导致你的自定义样式被覆盖。

解决方法 #

修改全局样式，使用更具体的选择器提升优先级：

.red-snackbar.mdc-snackbar__surface {
  background: #ff0000;
  color: white;
}

通过将自定义类与Material内置类组合，让选择器优先级更高，确保自定义样式生效。

额外验证点 #

• 确认panelClass配置正确：你的代码中panelClass: ['red-snackbar']格式正确，数组可传递多个类，此处无问题。
• 避免使用ng-deep：Angular 16中ng-deep已被废弃，SnackBar是全局层级渲染，使用全局样式是更合适的方式。
• 检查主题加载顺序：确保@import '@angular/material/prebuilt-themes/indigo-pink.css';在自定义样式之前，保证自定义样式能覆盖主题样式。

内容的提问来源于stack exchange，提问作者Joao Vitor