如何将 div 的背景颜色设置为 Angular 2 Material 中的主要主题颜色

Question

我正在使用 angular 2 material 的主题之一。我可以在 material 组件上使用主题颜色，例如按钮、使用 color="primary" 的工具栏。但我不知道如何为 div 设置主题。我不想在 .css 文件中对哈希进行硬编码，因为如果我决定更改主题，它将需要在所有地方进行更改。我错过了什么吗？执行此操作的最佳方法是什么？

Answer 1

事实上，您不能在每个 HTML 元素上使用 color="primary"。

我做的是 class 叫做 color-primary

@import '~@angular/material/theming';
@include mat-core();

$primary: mat-palette($mat-deep-purple, 600, 500, 900);
$accent: mat-palette($mat-amber, A400, A300, A600);


.color-primary {
  color: mat-color($primary);
}

.color-accent {
  color: mat-color($accent);
}

当然，我在这里设置了颜色，但您可以创建另一个 class，例如：background-color-primary.

（这是我的示例项目的 link：Pizza-Sync）。

Answer 2

最好的方法是为 BACKGROUND 和 FOREGROUND 使用定义的调色板。如果您愿意，可以添加属性。

如何将 div 的背景颜色设置为 Angular 2 Material 中的主要主题颜色

How to set the background-color of a div as primary theme color in Angular 2 Material

angular-material2

angular