typescript - Configurarea panelClass pentru Snackbar în Angular 5 Material

Încerc să adaug o configurație panelClass la Snackbar-ul din Angular Material.

Am scris următorul cod, urmând documentațiile de pe site-urile oficiale.

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;"]
    });
  }
}

Am legat deja evenimentul de butonul HTML. Când elimin configurația panelClass, atunci configurația de durată funcționează bine. Import o font Google (Open Sans) și încerc să aplic fontul la Snackbar. Totuși, primesc o eroare:

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.

Poate că nu reușesc să înțeleg cum să folosesc panelClass. Chiar și atunci când încerc să adaug acest lucru,

panelClass: ["color:white;"];

Încă afișează eroarea:

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('color: white;') contains HTML space characters, which are not valid in tokens.

Cum pot să rezolv această eroare și să fac lucrurile să funcționeze? Vă rog, ajutați-mă.

PS: Sunt familiarizat cu configurația extraClasses. Dar, nu vreau să o folosesc deoarece este scris în documentație că va fi curând depreciată.

PPS:: Funcționează bine cu configurația duratei.

Răspuns #1

În componenta ta SnackBarComponentExample încearcă:

saveButtonClick = () =>{
  let config = new MatSnackBarConfig();
  config.duration = 5000;
  config.panelClass = ['red-snackbar']
  this.snackBar.open("This is a message!", "ACTION", config);
}

Unde 'red-snackbar' este o clasă în fișierul principal styles.css al aplicației tale. Ciudat, nu am reușit să fac config.panelClass să funcționeze atunci când făceam referire la fișierul CSS asociat componentelor mele, dar odată ce am pus clasa în fișierul principal styles.css, stilurile mele au fost aplicate corect la snackBar.

Răspunsul #2

În cazul meu, tot ce este de mai sus nu funcționează. Începe să funcționeze când adaug !important în css:

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