For success snackbar messages the background should be green, and for error message the background should be red.

Also, when using the action to dismiss the Snackbar, the color it the button text should be white.

Approach

Create the service like this with the error and success notification methods:

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
@Injectable({ providedIn: 'root' })
export class NotificationService {
  config: MatSnackBarConfig = {
    duration: 3000,
    horizontalPosition: 'center',
    verticalPosition: 'bottom'
  };

  constructor(public snackBar: MatSnackBar) {}
  success(message) {
    this.config.panelClass = ['notification', 'success'];
    this.snackBar.open(message, '', this.config);
  }

  error(message) {
    this.config.panelClass = ['notification', 'error'];
    this.snackBar.open(message, '', this.config);
  }
}

Not that in each method method we have configured the config.panelClass property with the with the classes needed to style the snackbar.

Add the following to styles.scss:

snack-bar-container.success {
  background-color: green;
  color: white;
}

snack-bar-container.error {
  background-color: red;
  color: white;
}

.mat-simple-snackbar-action {
    color: white !important;
}

Creating a Styled Angular Material Snackbar Background | Task

Scenario

Approach

Demo