角度2/4角度素材デザインのスヌーカーバーのスタイル

Question

Angular2/4と角形文字を初めて使用しています。私は角度素材のデザインをスタイルにしたいsnackbarたとえば、背景色を黒とフォント色から別のものに変更します。
「スナックバー」のスタイルを変更するにはどうすればよいですか？

私はservice/coreに材料設計のスナックバーを用意し、必要に応じてすべてのコンポーネントでそれを呼び出すことができます。

角2の素材デザイン "スナックバー"を角度2/4でスタイルするにはどうすればよいですか？私は以下のコードが含まれている：

サービス/コア

> 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カスタムを提供するために、サービスを提供していますconfig。 configのプロパティの1つはextraClassesで、CSSクラスをスナックバーコンテナに追加することができます（doc）。

extraClassesは、デフォルトのCSSクラスを上書きするために::ng-deepと一緒に使用できます。ここでは例です：

component.ts：

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

（カスタム構成を提供する）

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

component.css：

はコンポーネントでimportを次が必要です

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

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

試したい場合は、Plunker demoです。