角5材质蛇条panelClass配置

Question

我试图将panelClass配置添加到角质材料蛇条中。

我编写了以下代码，下面是官方网站上的文档。

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上，这样Button.When配置就可以正常工作了。我正在导入谷歌字体(Open )，并尝试将字体应用到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

在角7使用：：吴-深在前面的班级为我工作。

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