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 color to something else.
How do i go about styling the "snackbar" ?

I have the material design snackbar in the service/core and to make it available i call it in every component as needed.

How can I style the Angular 2 material design "snackbar"in Angular 2/4? I have included the code snippet below:

service/core

import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable'
import { DOCUMENT } from'@angular/platform-browser'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 
import { MdDialogConfig, ComponentType } from '@angular/material'; 
import {MdSnackBar} from '@angular/material';

constructor(
    public dialog: MdDialog,
    public snackBar: MdSnackBar,
    @Inject(DOCUMENT) public doc: any   ) {
      dialog.afterOpen.subscribe((ref: MdDialogRef<any>) => {
        if (!doc.body.classList.contains('no-scroll')) {
        doc.body.classList.add('no-scroll');
        }
      });
      dialog.afterAllClosed.subscribe(() => {
        doc.body.classList.remove('no-scroll');
      });        }

   openSnackBar(message: string, action?: string) {
    this.snackBar.open(message, action, {
      duration: 4000,
    });   }

wiz.components.ts ....

 saveData(): void {
    this.advisorClientModel.currentStep = this.currentStep;
    this.advisorClientModel.clientId = this.faService.getClientId();
    this.advisorClientModel.isMaxAmount = this.isMaximumAmount;
    this.advisorClientModel.desiredLoanAmount = this.loanAmount;
    this.advisorClientModel.maxLoanAmount = this.eligibleSelected.advanceAmount;
    this.advisorClientModel.pledgedAccounts = this.getPledgedAccountsArray();
    this.advisorClientModel.pledgedMarketValue = this.getPledgedMarkeValue();

    this.faService.updateAdvisorClient( this.advisorClientModel )
      .subscribe(
        successModel => {
          this.coreService.openSnackBar("Your Data Has been Saved");
          this.navigateTo("fa/wiz" + (this.currentStep + 1));
        },
        error => {
          this.onError(error);
        }
      );
  }

Answer 1

md-snackbar provides a service to provide custom config. One the properties of config is extraClasses that allows to add CSS classes to the snack bar container (doc).

extraClasses can be used with ::ng-deep to override the default CSS classes. Here's an example:

component.ts:

Requires following import in the component:

import {MdSnackBar, MdSnackBarConfig} from '@angular/material';

(providing custom configuration)

openSnackBar(message: string, action?: string) {
  let config = new MdSnackBarConfig();
  config.extraClasses = ['custom-class'];
  this.snackBar.open(message, action ? 'Action Label' : undefined, config);
}

component.css:

::ng-deep snack-bar-container.custom-class {
  background: yellow;
}

::ng-deep .custom-class .mat-simple-snackbar {
  color: green;
}

Here's a Plunker demo if you would like to try.

NOV 2018 UPDATE: Angular 6+

The syntax has changed a bit, with the md- prefix being replaced mat- and extraClasses was replaced with panelClass. The function is overall the same though:

const config = new MatSnackBarConfig();
config.panelClass = ['custom-class'];
...

and the imports too:

import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

Answer 2

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

Answer 3

From mat SnackBarConfig Class you can add

panelClass: string | string[]

"Extra CSS classes to be added to the snack bar container".

this.snackBar.open("Your custom Message", '', {
      panelClass:"custom_sneak_bar"
}