如何将 Angular Material 主题应用于非材质组件？答案

【问题标题】：How to apply Angular Material theme to non-material components?如何将 Angular Material 主题应用于非材质组件？
【发布时间】：2018-10-12 20:49:17
【问题描述】：

我正在为我的 Angular 4 应用程序使用 Angular Material 2 主题。我在我的 theme.scss 中创建了以下主题

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

$primary-color: mat-palette($mat-grey);
$accent-color: mat-palette($mat-blue, 500, 900, A100);
$warning-color: mat-palette($mat-red);

$dark-theme: mat-dark-theme($primary-color, $accent-color, $warning-color);
$light-theme: mat-light-theme($primary-color, $accent-color, $warning-color);

在我的 style.scss 中，我有以下内容

@import 'theme.scss';

.dark-theme {
    @include angular-material-theme($dark-theme);
}

.light-theme {
    @include angular-material-theme($light-theme);
}

在我的 HTML 中，我硬编码了深色主题（最终我想给用户一个选项来选择两者之一 - 深色或浅色）

<body class="dark-theme">
    <app-root></app-root>
</body>

但是当我运行应用程序时，我看不到我预期会看到的深色。例如，如果我检查 body 元素，我根本看不到它设置了任何样式。或者，如果我添加了一个 h1 元素，则没有为其设置样式。我希望我的 body 标签内的所有元素都将遵循主题的颜色。不是这样吗？我是否应该明确提及我的非垫子元素需要具有哪些颜色？

我不认为引导是不正确的。因为当我使用像下面这样的垫子组件时，主题应用于该组件 - 但整体背景仍未设置，因此为白色。

<mat-drawer-container class="example-container">
    <mat-drawer mode="side" opened="true">{{title}}</mat-drawer>
    <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

另外，如果我想应用与我正在使用的调色板不同的颜色，而不是主色、强调色或警告色，该怎么办？如何设置和使用它们？

我对这个概念完全陌生，现在才开始理解上面的代码在做什么。非常感谢任何帮助。

【问题讨论】：

我自己也在学习 material.angular.io 主题。我还没有找到像 btn-primary 或 btn-danger 这样的 boostrap 那样更简单的设置方法。我知道的是创建自己的类.my-primary-background { background-color: mat-color($primary-color) } 并将该类应用于您想要的样式。有没有更清洁的方法？可能是？参考：material.angular.io/guide/…
经过一些研究，我能够开始使用它。主题仅适用于材质组件。 @Tin 我将您的解决方案与我在这里找到的答案合并在一起stackoverflow.com/questions/46499768/…

标签： html css angular angular-material2

【解决方案1】：

我认为这就是你所缺少的：

最后，如果您的应用内容没有放在 mat-sidenav-container 元素中，您需要将 mat-app-background 类添加到您的包装元素（例如主体）中。这可确保将正确的主题背景应用到您的页面。

source

如果您想从调色板应用不同的颜色，您可以使用 this guide 中介绍的 mixins

【讨论】：

我已经将这个类应用到包含深色主题参考
的 div 上诀窍。