Question

我想在MatSnackBar panelClass中插入一个scss类。但它没有工作。仅供参考，verticalPosition和horizontalPosition正常工作。这是我的TS：

 openSnackBar(message: string, action: any) {
    this.snackBar.open(message, action, {
      duration: 2000,
      verticalPosition: 'top',
      horizontalPosition: 'center',
      panelClass: ['alert-red'],
    });
 }

这是我的Scss：

.alert-red{
  padding: 20px;
  background-color: red;
  color: white;
}

Answer 1

编辑： 如果在班级前面加上以下::ng-deep snack-bar-container（请参阅this注释），这似乎是可行的。因此，您的组件SCSS文件应如下所示：

::ng-deep snack-bar-container.alert-red{
  padding: 20px;
  background-color: red;
  color: white;
}

解决方法：：请参阅帖子here，看来您需要将样式放在应用程序styles.scss文件中，而不是组件SCSS文件中。

检查this堆栈闪电，样式将在styles.scss中起作用，但在注释掉并将其保留在app.component.scss中时无效。不确定这是错误还是预期的行为。

Answer 2

您必须为组件设置encapsulation属性：

赞：

import { ViewEncapsulation } from '@angular/core'; // import ViewEncapsulation from core

@Component({
  encapsulation: ViewEncapsulation.None  // Set ViewEncapsulation.None for encapsulation property
})

并在HTML文件中添加CSS类，如下：

this.snackBar.open("message", {
      panelClass:['customClass']
});

在CSS文件中：

.customClass{
  color: red;
}

Working Demo

Answer 3

我遇到了同样的问题，我只是在我的 css 类中定义的属性之后添加了 !important 以覆盖一些默认样式。所以喜欢：

    .alert-red{
      padding: 20px !important;
      background-color: red !important;
      color: white !important;
    }

MatSnackBar panelClass不读取样式类

3 个答案: