Angular 2材質在按鈕上使用較淺/較深的顏色

Question

是否有任何優雅的方式使用角色2材質中的按鈕使用較亮/較暗的主色或深色變體，而無需用手重新創建整個樣式？

Answer 1

如果您使用的青菜可以導入材料主題化到您的SCSS文件和目標材料的顏色，像這樣：

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>