Change color of matsnackbar

  angular, css, frontend, typescript

I’m struggling with change of snackbar(Angular Material) color in Angular. I used panelClass in ts and input it in global css but color doesn’t change. How to fix it? Im kinda fresh in this framework.

app.component.ts

import { Component } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MatSnackBarHorizontalPosition } from '@angular/material/snack-bar';
import { MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
  verticalPosition: MatSnackBarVerticalPosition = 'top';
  constructor(private snackBar: MatSnackBar) { }
  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
      panelClass: ['.snackbar-style'],
    });
  }
}

app.component.css

.snackbar-style {
  background-color: black;
  color: hotpink;  
}
            

Source: Angular Questions

One Reply to “Change color of matsnackbar”

  • A bit late, and you might have found it out already, but for all others: The panel class must be specified without the dot: panelClass: [‘snackbar-style’]. This works for me with Angular 11.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.