角材料-如何在活动主题的HTML中使用所有颜色? [英] Angular Material - How to use all colors in HTML of active theme?

问题描述

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

If I import the SCSS theming functions to my component's stylesheet:

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

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

I can access all theme colors / hues like this:

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

在模板文件中，我还可以为具有@Input() color属性的组件设置primary，accent和warn主题颜色:

In template file I am also able to set primary, accent and warn theme color for components that have the @Input() color property:

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

但是如何在模板文件中设置所有其他颜色/色调?它们是否已经作为类提供了(例如mat-primary-300之类)，还是我必须自己声明它们?

But how can I set all the other colors / hues in template file? Are they already provided as classes (something like mat-primary-300) or do I have to declare them myself?

推荐答案

到目前为止，材料2中没有任何直接方法(例如角材料中的md-color)使用色相，但是您可以使用以下方法大约: 创建样式类，如下所示:

As of now, there isn't any direct way in material 2 (like md-color in angular material) to use hues, however you can use following work around: Create style classes as follows:

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

您还可以使用其他颜色样本. 例如:

You can also use other color swatches. For e.g.:

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

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

希望这会有所帮助！

这篇关于角材料-如何在活动主题的HTML中使用所有颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！