title: Angular 2/4 How to style angular material design snackbar
body: <p>I am new to Angular2/4 and angular typescript. I want to style the angular material design <strong>snackbar</strong>  for example change the background color from black and font color to something else.<br />
  How do i go about styling the &quot;snackbar&quot;  ?</p>
  <p>I have the material design snackbar in the service/core and to make it available i call it in every component as needed.</p>
  <p>How can I style the Angular 2 material design &quot;snackbar&quot;in Angular 2/4? I have included the code snippet below:</p>
  <p><strong>service/core</strong></p>
  <pre><code>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&lt;any&gt;) =&gt; {
          if (!doc.body.classList.contains('no-scroll')) {
          doc.body.classList.add('no-scroll');
          }
        });
        dialog.afterAllClosed.subscribe(() =&gt; {
          doc.body.classList.remove('no-scroll');
        });        }
  
     openSnackBar(message: string, action?: string) {
      this.snackBar.open(message, action, {
        duration: 4000,
      });   }
  </code></pre>
  <p><strong>wiz.components.ts</strong>
  ....</p>
  <pre><code> 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 =&gt; {
            this.coreService.openSnackBar(&quot;Your Data Has been Saved&quot;);
            this.navigateTo(&quot;fa/wiz&quot; + (this.currentStep + 1));
          },
          error =&gt; {
            this.onError(error);
          }
        );
    }
  </code></pre>