Angular 5 Material Snackbar panelClass 配置答案

【问题标题】：Angular 5 Material Snackbar panelClass configAngular 5 Material Snackbar panelClass 配置
【发布时间】：2017-12-20 07:48:42
【问题描述】：

我正在尝试将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：：在持续时间配置下运行良好。

【问题讨论】：

标签： angular typescript angular-material

【解决方案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。

【讨论】：

或者：this.snackBar.open("This is a message!", "ACTION", {duration: 500, panelClass: ['red-snackbar']});
::ng-deep .error-snackbar { 背景色：紫红色！重要； } 为我工作
@Lucky 它现在可能有效，但我建议不要使用这种方法。 Angular 已弃用 /deep/, >>>, and ::ng-deep。对他们的支持最终将被完全放弃。
组件 css 文件中的样式是孤立的，这意味着您不能将它们注入到较低级别的组件中，这就是它不起作用的原因。

【解决方案2】：

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

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

【讨论】：

我更喜欢这个而不是把它放在全局 css 文件中，因为它与这个组件有关，应该放在所有其他样式所在的地方
@Wildhammer 这与将其放在全局 css 文件中相同。来自 Angular 文档“Any style with ::ng-deep applied becomes a global style”这也使得 Angular V7 中的工作，但 ng-deep 在最新版本的 Angular 中已被弃用。

【解决方案3】：

panelClass 定义为

面板类：字符串 |字符串[]

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

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

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

因此，您需要在 css 中定义您的样式，然后才能将类应用于栏：

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

【讨论】：

那么，extraClasses 和 panelClass 有什么区别？现在，我传递的是 CSS 类，而不是 CSS 语句，但它不起作用。
extraClasses 已弃用。你能创建一个 plunker 来展示你的 bug 吗？

【解决方案4】：

在我的情况下，以上所有都不起作用。当我在css 中添加!important 时它开始工作：

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

【讨论】：