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颜色）使用色调，但是您可以使用以下方法：创建样式类如下：

.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);
}

希望这有帮助！

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

1 个答案: