Angular 2材质在按钮上使用较浅/较深的颜色

Question

是否有任何优雅的方式可以使用较暗/较暗的主要或强调颜色的变体与角度2材料的按钮,而无需手工重新创建整体造型？

Answer 1

如果您使用sass,您可以将材料主题导入到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>