MatSnackBar panelClass 不读取样式类 [英] MatSnackBar panelClass doesnt read styling class

问题描述

我想在 MatSnackBar panelClass 中插入一个 scss 类.但它没有工作.仅供参考，verticalPosition &水平位置工作正常.这是我的 TS:

I want to insert a scss class into MatSnackBar panelClass. but it didnt working. fyi, the verticalPosition & horizontalPosition work fine. heres my 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;
}

推荐答案

如果您使用以下 ::ng-deepsnack-bar-container 为您的课程添加前缀，它似乎可以工作(请参阅 this 评论).所以你的组件 SCSS 文件应该是这样的:

It seems to work if you prefix your class with the following ::ng-deep snack-bar-container (see this comment). So your component SCSS file should look like this:

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

WORKAROUND:见这里的帖子，看来你需要把样式放进去您的应用程序 styles.scss 文件，而不是您的组件 SCSS 文件.

WORKAROUND: See post here, it seems that you need to put the style in your applications styles.scss file and not in your components SCSS file.

检查这个 stackblitz，该样式在 styles.scss 中有效，但当您将其注释掉并将其保留在 app.component.scss 中时则无效.不确定这是错误还是预期行为.

Check this stackblitz, the style works in the styles.scss, but not when you comment it out and leave it in the app.component.scss. Not sure if this is a bug or intended behaviour.

这篇关于MatSnackBar panelClass 不读取样式类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！