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中尝试：

<wsp:ExactlyOne>

}

红色小吃店＆＃39;是您的应用程序主要styles.css文件中的一个类。奇怪的是，当我引用我的组件关联的css文件时，我无法使config.panelClass工作，但是一旦我将类放入主要的styles.css文件中，我的样式就被正确地应用到了snackBar。

Answer 2

就我而言，以上所有方法均无效。当我在!important中添加css时，它开始工作：

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

Answer 3

panelClass定义为

panelClass：string |串[]

要添加到小吃店容器的额外CSS类。

它用于添加类，而不是样式。

想象一下，如果必须在其中放置复杂的CSS样式，那么数组的大小。

所以你需要在css中定义你的风格，然后才能将一个类应用到栏中：

panelClass: ['first-class', 'second-class'];

Answer 4

在angular 7中，在课前使用:: ng-deep对我有用。

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

Angular 5 Material Snackbar panelClass配置

4 个答案: