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

问题描述

我想在MatSnackBar panelClass中插入一个scss类.但是它没有用. fyi，垂直位置& horizo​​ntalPosition工作正常.这是我的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-deep snack-bar-container作为前缀，则似乎可行(请参见此评论).因此，您的组件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;
}

解决方法:请参见此处，看来您需要将样式放入您的应用程序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屋！