角材料-如何在活动主题的HTML中使用所有颜色？

Question

如果将SCSS主题功能导入到组件的样式表中：

@import '~@angular/material/theming';
@import 'src/my-mat-color-palette';

我可以像这样访问所有主题颜色/色调：

background: mat-color($my-pallete, 700);
color: mat-contrast($my-pallete, 700);

在模板文件我也能设置primary，accent和warn主题颜色有组件@Input() color特性：

<button mat-button color="accent">Click me!</button>

但是，如何在模板文件中设置所有其他颜色/色相？它们是否已经作为类提供了（类似mat-primary-300），还是我必须自己声明它们？

Answer 1

到目前为止，材质2中没有任何直接的方式（如角材质中的md-color）使用色相，但是您可以使用以下解决方法：创建样式类，如下所示：

.primary-light-bg {
  background-color: mat-color($primary, lighter);
}

.primary-dark-bg {
  background-color: mat-color($primary, darker);
}

.primary-bg-A200 {
  background-color: mat-color($primary, A200);
}

.primary-bg-A300 {
  background-color: mat-color($primary, A400);
}

您还可以使用其他颜色样本。例如：

.purple-bg-600 {
  background: mat-color($mat-purple, 600);
}

.green-bg-600 {
  background: mat-color($mat-green, 600);
}

希望这可以帮助！