Angular中mat-snackbar自定义CSS样式失效问题求助

你遇到的问题主要是几个细节处理失误，以下是针对性的修复方案：

1. 修复::ng-deep语法错误 #

你在component.css中写的第三个样式块缺少闭合的}，直接导致样式规则失效，正确写法应为：

::ng-deep .error-snackbar {
  background-color: red !important;
}

2. 适配Angular视图封装规则 #

MatSnackbar是全局创建的组件，不在当前组件的视图树范围内：

• 在component.css中必须使用::ng-deep穿透视图封装，否则组件内样式无法作用到Snackbar
• 在styles.css中无需::ng-deep，但可结合Material默认类增强优先级，确保覆盖默认样式：

.mat-snack-bar-container.error-snackbar {
  background-color: red;
}

3. 规范panelClass传递方式 #

虽然单个类名可直接传递，但使用数组形式更稳妥（避免潜在的类名解析问题）：

this.errormessagecard.open(error.error.message, 'Esci', {
  panelClass: ['error-snackbar']
});

4. 修正选择器类型 #

你之前写的error-snackbar{...}是元素选择器，而你设置的是类名，必须加上.改为类选择器.error-snackbar{...}才能匹配到目标元素。

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