typescript Angular 5 Material Snackbar panelClass 配置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47901127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 Material Snackbar panelClass config
提问by abhijeetps
I am trying to add a panelClassconfig to the Angular Material Snackbar.
我正在尝试将panelClass配置添加到Angular Material Snackbar。
I wrote the following code, by following documentations from the official websites.
我按照官方网站的文档编写了以下代码。
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;"]
});
}
}
I have already binded the event to the HTML Button.When I am removing the panelClassconfig, then the duration config is working fine.
I am importing a Google Font (Open Sans) and trying to apply the font to the Snackbar. However, I am receiving an error:
我已经将事件绑定到 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.
Maybe, I am not able to understand how to use panelClass. Even, when I am trying to add this,
也许，我无法理解如何使用panelClass. 甚至，当我试图添加这个时，
panelClass: ["color:white;"];
It is still showing the error:
它仍然显示错误：
ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('color: white;') contains HTML space characters, which are not valid in tokens.
How can I fix this error and get things working? Please help.
如何修复此错误并使一切正常工作？请帮忙。
PS:I am aware with the extraClassesconfig. But, I don't want to use it as it is written in the documentation that it will soon be deprecated.
PS：我知道extraClasses配置。但是，我不想使用它，因为它写在文档中很快就会被弃用。
PPS:: It is working fine with the duration config.
PPS：：它与持续时间配置一起工作正常。
回答by Narm
In your component SnackBarComponentExample try:
在您的组件 SnackBarComponentExample 中尝试：
saveButtonClick = () =>{
let config = new MatSnackBarConfig();
config.duration = 5000;
config.panelClass = ['red-snackbar']
this.snackBar.open("This is a message!", "ACTION", config);
}
Where 'red-snackbar'is a class in your apps main styles.cssfile. Strangely I was unable to get the config.panelClassto work when I was referencing my components associated css file, but once I put the class into the main styles.cssfile my styles were applied correctly to the snackBar.
'red-snackbar'您的应用程序主styles.css文件中的类在哪里。奇怪的是，config.panelClass当我引用与我的组件相关的 css 文件时，我无法使用它，但是一旦我将类放入主styles.css文件中，我的样式就被正确地应用到了小吃店。
回答by krzyjez
In my case all above doesn't work. It starts working when I add !importantin css:
在我的情况下，以上所有内容都不起作用。它开始工作时，我想补充!important的css：
.error-snackbar {
background-color: fuchsia !important;
}
回答by Lucky
In angular 7 using ::ng-deep in front of class worked for me.
在 Angular 7 中，在课堂前使用 ::ng-deep 对我有用。
::ng-deep .snackBar-fail {
color: #ffffff !important;
background-color: #cc3333 !important;
}
回答by gyc
panelClass is defined as
panelClass 定义为
panelClass: string | string[]
Extra CSS classes to be added to the snack bar container.
面板类：字符串 | 细绳[]
要添加到小吃店容器的额外 CSS 类。
It is used to add a class, not a style.
它用于添加类，而不是样式。
Imagine the size of the array if you had to put complex css styling in there.
想象一下如果您必须在其中放置复杂的 css 样式，该数组的大小。
So you need to define your style in a css and only then you can apply a class to the bar:
因此，您需要在 css 中定义您的样式，然后才能将类应用到栏：
panelClass: ['first-class', 'second-class'];
