Angular 5 und Material - Wie ändert man die Hintergrundfarbe von SnackBar Komponente

Question

Ich muss den Hintergrund von der Snackbar Komponente ändern. Ich verwende es, um den Benutzer über einige Fehler oder abgeschlossene Aktionen des Benutzers zu informieren oder zu informieren.

Die Materialversion aus dem Projekt. "@ eckig/material": "^ 5.0.0-rc.1",

Die Dokumentation https://material.angular.io/components/snack-bar/api sagen über eine API, um die Klasse zu ändern.

panelClass: Zeichenfolge | string [] Zusätzliche CSS-Klassen, die zum Snackbar-Container hinzugefügt werden.

Dies ist, was ich in der CSS-Datei hinzufügen.

.mycsssnackbartest { 
    background-color: blue; 
} 

Dies ist der Code die snackbar zu öffnen

this.snackBar.open('Informing the user about sth', 'User Message' , { 
    panelClass: ['mycsssnackbartest '] 
}); 

Was mache ich falsch?

Answer 1

können Sie verwenden, um die extraClasses Optionsklassen anwenden auf einem snackbar

this.snackBar.open(message, action, { 
    duration: 2000, 
    extraClasses: ['blue-snackbar'] 
}); 

CSS (in styles.scss):

.blue-snackbar { 
    background: #2196F3; 
} 

Siehe Stackblitz example