角5と素材 - SnackBarコンポーネントの背景色を変更する方法

スナックバーコンポーネントから背景を変更する必要があります。私は、ユーザーに何らかのエラーや完了した操作についてアラートを出すか、ユーザーに通知します。角5と素材 - SnackBarコンポーネントの背景色を変更する方法

プロジェクトの資料バージョン。 "@ angle/material"： "^ 5.0.0-rc.1"、

ドキュメントhttps://material.angular.io/components/snack-bar/apiは、クラスを変更するapiについて言う。

panelClass：string | string [] スナックバーコンテナに追加される余分なCSSクラス。

これは私がCSSファイルに追加するものです。

.mycsssnackbartest { 
    background-color: blue; 
}

これは

this.snackBar.open('Informing the user about sth', 'User Message' , { 
    panelClass: ['mycsssnackbartest '] 
});

は私が間違って何をやっているスナックバーを開くためのコードですか？

'MatSnackBarConfig'は、フィールドを持っています「extraClasses」という名前の「余分なCSSクラスをスナックバーコンテナに追加する」あなたはそれが存在しない 'panelClass'を使用しています –

もし見つかった場合、panelClassはAPIドキュメントにあります。 https://material.angular.io/components/snack-bar/api。私はextraClassesを使用しませんでした。しかし、私はそれをテストするつもりです。ありがとう。 –

あなたは（styles.scssに）スナックバー上

this.snackBar.open(message, action, { 
    duration: 2000, 
    extraClasses: ['blue-snackbar'] 
});

CSSをクラスに適用するにはextraClassesオプションを使用することができます。

.blue-snackbar { 
    background: #2196F3; 
}

を参照してくださいStackblitz example

2017-11-30 08:38:59

ありがとうございました。出来た。私はscssファイルを使用していませんでした。私はコンポーネントからCSSファイルに設定しようとしていました。 –

答えて