角度2素材でボタンの明るく/濃い色を使用

Question

2色のボタンでプライマリまたはアクセントカラーの明るい/暗い色のバリエーションを使用するエレガントな方法は、スタイリング全体を手作業で再作成する必要はありませんか？

Answer 1

あなたがそうのようなあなたのSCSSファイルとターゲット材料の色に材料のテーマをインポートすることができSASSを使用する場合：

app.component.scssを

@import '~@angular/material/theming'; 

.buttonPrimary { 
    background-color: mat-color($mat-purple, 200); 
} 

.buttonAccent { 
    background-color: mat-color($mat-amber, A200); 
} 

app.component.html

<button md-raised-button class="buttonPrimary">primary</button> 
<button md-raised-button class="buttonAccent">accent</button>