我正在尝试向Angular Material Snackbar添加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按钮。当我删除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：：时长配置正常。
6条答案
按热度按时间xe55xuns1#
在您的组件SnackBarComponentExample中尝试：
其中**
'red-snackbar'是应用主styles.css文件中的类。奇怪的是，当我引用我的组件关联的css文件时，我无法让config.panelClass工作，但是一旦我把这个类放到主styles.css**文件中，我的样式就正确地应用到了snackBar。qvsjd97n2#
在我的情况下，以上所有都不起作用。当我在
css中添加!important时，它开始工作：pwuypxnk3#
在angular 7中，在类前面使用：：ng-deep对我来说很有效。
zfycwa2u4#
panelClass定义为
panelClass：string|string[]
额外的CSS类被添加到小吃店容器。
它用于添加类，而不是样式。
想象一下，如果你不得不把复杂的css样式放进去，数组的大小会有多大。
所以你需要在css中定义你的样式，只有这样你才能将一个类应用到酒吧：
r6l8ljro5#
在Angular 13中，如果你需要更改字体大小，将这个添加到css类中：
7d7tgy0s6#