Angular 5 Material Snackbar panelClass配置

Question

我正在尝试将panelClass配置添加到Angular Material Snackbar.

我通过以下官方网站的文档编写了以下代码.

import { Component, OnInit } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from "@angular/material";
import { Location } from '@angular/common';

@Component({
  selector: 'snack-bar-component-example',
  templateUrl: './snack-bar-component-example.html',
  styleUrls: ['./snack-bar-component-example.css']
})
export class SnackBarComponentExample implements OnInit {

  constructor(public snackBar: MatSnackBar) { }

  ngOnInit() {
  }

  saveButtonClick = () =>{
    this.snackBar.open("This is a message!", "ACTION", {
      duration: 3000,
      panelClass: ["font-family:'Open Sans', sans-serif;"]
    });
  }
}

我已经将事件绑定到HTML按钮.当我删除panelClass配置时,持续时间配置工作正常.我正在导入Google字体(Open Sans)并尝试将字体应用于Snackbar.但是,我收到一个错误:

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('font-family:'Open Sans', sans-serif;') contains HTML space characters, which are not valid in tokens.

也许,我无法理解如何使用panelClass.甚至,当我试图添加这个,

panelClass: ["color:white;"];

它仍然显示错误:

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('color: white;') contains HTML space characters, which are not valid in tokens.

如何修复此错误并使其正常工作？请帮忙.

PS:我知道extraClasses配置.但是,我不想使用它,因为文档中写的它很快就会被弃用.

PPS:它在持续时间配置下工作正常.

Answer 1

在您的组件SnackBarComponentExample中尝试:

saveButtonClick = () =>{
  let config = new MatSnackBarConfig();
  config.duration = 5000;
  config.panelClass = ['red-snackbar']
  this.snackBar.open("This is a message!", "ACTION", config);
}

}

其中'red-snackbar'是您的应用主要styles.css文件中的一个类.奇怪的是,当我引用我的组件关联的css文件时,我无法使config.panelClass工作,但是一旦我将类放入主要的styles.css文件中,我的样式就被正确地应用到了snackBar.

Answer 2

在我的情况下，以上所有内容都不起作用。它开始工作时，我想补充!important的css：

.error-snackbar {
  background-color: fuchsia !important;
}

Answer 3

在 Angular 7 中，在课堂上使用 ::ng-deep 对我有用。

::ng-deep  .snackBar-fail {
    color: #ffffff !important;
    background-color: #cc3333 !important;
}