Angular 5 Material Snackbar面板类配置

Question

我正在尝试向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.

我该如何修复这个错误并使事情正常工作？请帮忙。

附言：我知道extraClasses配置，但是我不想使用它，因为文档中写道它很快就会被弃用。

附言2：它与持续时间配置一起正常工作。

- abhijeetps

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。

- Narm

---

另一种选择是： this.snackBar.open("这是一条信息！", "操作", {duration: 500, panelClass: ['red-snackbar']}); - Raj

::ng-deep .error-snackbar { background-color: fuchsia !important; } 对我有用 - Lucky

@Lucky 现在可能可以使用这种方法，但我建议不要这样做。Angular 已经弃用了 /deep/, >>> 和 ::ng-deep。它们的支持最终将被完全删除。 - Narm

你组件的 CSS 文件中的样式是隔离的，这意味着你不能将它们注入到较低级别的组件中，这就是为什么它不起作用的原因。 - Wildhammer

Answer 2

在我的情况下，以上所有方法都不起作用。只有当我在 css 中添加 !important 时才会生效:

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

- krzyjez

Answer 3

在Angular 7中，在类名前使用::ng-deep对我有效。

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

- Lucky

---

我更喜欢将其放在组件中，而不是全局CSS文件中，因为这与该组件相关，并且应该保留在所有其他样式的相同位置。 - Wildhammer

@Wildhammer 这与将其放入全局 CSS 文件中相同。来自 Angular 文档的说明：“应用 ::ng-deep 的任何样式都成为全局样式”。此外，这在 Angular V7 中可能有效，但是在最新版本的 Angular 中，ng-deep 已被弃用。 - Narm

Answer 4

panelClass被定义为：

panelClass: string | string[]

额外的CSS类将被添加到小吃店容器中。

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

如果您必须在其中放置复杂的CSS样式，那么数组的大小就会很大。

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

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

- gyc

---

那么，“extraClasses”和“panelClass”有什么区别呢？ 现在，我传递的是CSS类，而不是CSS语句，但它并没有起作用。 - abhijeetps

extraClasses已经被弃用。你能创建一个plunker来演示你的错误吗？ - gyc

Answer 5

this.snackBar.open('Ho ho ho', 'Okey',{
    duration:200000,
    panelClass: 'main-snackbar'
});

.main-snackbar{
  .mdc-snackbar__surface{
    background-color: #72716d !important;
    color: white!important;
  }
  .mat-mdc-snack-bar-actions{
    button{
      color: white!important;
    }
  }
}

- hardcorelite

Answer 6

在Angular 13中，如果您需要更改字体大小，请将以下内容添加到CSS类中：

::ng-deep .snackbar_ * {
    font-size: 22px !important;
 }

- Gabriel Aguiar Aquino