Angular 2/4 How to style angular material design snackbar

Question

I am new to Angular2/4 and angular typescript. I want to style the angular material design snackbar for example change the background color from black and font

Answer 1

I made the following code to work with Angular 6 and Angular Material 6.

The service that contain the snackBar calls:

@Injectable()
export class MessageService {
   constructor(private snackBar: MatSnackBar) {}

   showError(message: string) {
      const config = new MatSnackBarConfig();
      config.panelClass = ['background-red'];
      config.duration = 5000;
      this.snackBar.open(message, null, config);
   }
}

Add the css class in the styles.css file:

.background-red{
   background-color: rgb(153, 50, 50);
}