Change color of matsnackbar

Question

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;  
}

What if you remove the `.` like this: `panelClass: ['snackbar-style']`, maybe the brackets are not needed either — Benny Halperin, Jan 19 '21 at 06:13
Hey check out this post it might help you [Styling Snackbar of Angular Material](https://stackoverflow.com/questions/45439313/angular-2-4-how-to-style-angular-material-design-snackbar) — SBROCKS, Jan 19 '21 at 06:17
You can simply access by the CSS class selectors. If your lay-out does not apply, then use the `::ng-deep` selector to force the styling. [How and where to use ng-deep?](https://stackoverflow.com/questions/46786986/how-and-where-to-use-ng-deep) — Ruben Szekér, Jan 19 '21 at 07:22

score 0 · Answer 1 · answered May 06 '23 at 14:58

in global styles.scss add:

:root {
    --primary-color: #153d77;
    --secondary-color: #6c757d;
    --white-color: #fff;
    --success-color: #198754;
    --delete-color: #dc3545;
    --background-color: #f2f2f2;
  }
  
  .success-snackbar {
    color: white;
    --mdc-snackbar-container-color: var(--success-color);
    --mat-mdc-snack-bar-button-color: var(--white-color);
  }

.error-snackbar {
    max-width: max-content !important;
    color: white;
    --mdc-snackbar-container-color: var(--delete-color);
    border-color: #f5c6cb;
  
    --mat-mdc-snack-bar-button-color: var(--white-color);
  }
  
  .light-success-snackbar {
    color: #155724;
    --mdc-snackbar-container-color: #d4edda;
    --mat-mdc-snack-bar-button-color: darkgreen;
  }
  
  .light-error-snackbar {
    color: #721c24;
    --mdc-snackbar-container-color: #f8d7da;
    border-color: #f5c6cb;
    --mat-mdc-snack-bar-button-color: darkred;
  }

and to call .success-snackbar insert in panelClass:

openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
      panelClass: ['success-snackbar'],
    });
  }

Change color of matsnackbar

1 Answers1