Angular Material - 如何在事件主题的 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

到目前为止， Material 2 中没有任何直接的方法(如 Angular Material 中的 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);
}

希望这有帮助!