Angular 6,7 如何将默认主题颜色应用于 mat-sidenav 背景？

Question

我希望mat-sidenav 的背景与我的mat-toolbar 相同 - 主题颜色。

在src\styles.scss 我有：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

我的模板/HTML 文件有：

<mat-toolbar color="primary">
    <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
    </button>
    Title text
</mat-toolbar>

这很好地显示为带有menu 图标和Title text 的靛蓝菜单栏。 下面我想要一个mat-sidenav（将有菜单项），我希望mat-sidenav 区域的整个背景与以下颜色相同：

<mat-toolbar color="primary">

靛蓝 - 由主题定义。

HTML 代码继续渲染mat-sidenav：

<mat-sidenav-container>
    <mat-sidenav #sidenav mode="side" opened>
        <app-vertical-menu></app-vertical-menu>  // renders the menu items
    </mat-sidenav>
    <mat-sidenav-content>
        <div class="app-main-area">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

mat-sidenav 背景和颜色不受应用主题的影响，其背景颜色为空白。

我知道我可以使用模板中的类名在组件内设置 mat-sidenav 背景的样式 - 例如：

...
<mat-sidenav #sidenav2 mode="side" opened class="vertical-menu">
...

在 style/scss 文件中：

.vertical-menu {
    background-color: navy !important;
}

但我想应用默认主题的主题颜色（例如：indigo-pink.css），所以mat-sidenav 背景颜色与我们用来获取工具栏颜色的主题相同

Answer 1

我知道这不是你想要的（我也不是），但我在我的 styles.css 中定义了一个类，其原色与靛蓝粉色主题相同

.background-primary { background-color: #3f51b5; }

我的 mat-sidenav 是这样的：

<mat-sidenav class="background-primary"...

Answer 2

您需要将自定义主题应用到您的组件。总结一下：

1. 在style.scss 定义您的主题
2. 定义组件主题，例如。 my-component.component.scss-theme.scss。这可能与my-component.component.scss 不同。您可以将主题文件中的主题（颜色和版式）和非主题文件中的其他内容（大小、位置等）分开。
3. 在style.scss 中包含并调用组件主题

我在Stackblitz 上创建了一个示例应用程序。如您所见，mat-sidenav 和 mat-toolbar 具有相同的主题。您可以尝试将color=primary|accent|warn 传递给mat-toolbar 和mat-sidenav

Tomas Trajan 在The complete guide to Angular Material Themes 写了一个非常好的媒体博客。您可以在 Theming your own components 找到 Angular 团队的文档。

2019 年 12 月 12 日更新

我创建了一系列帖子来详细了解 Medium 上的 Angular Material Theme。你可以在这里找到它们：Create、Understand 和 Apply 主题。

2020 年 10 月 1 日更新

我创建了一系列更新的帖子，以详细了解 Medium 上的 Angular Material Theme。你可以在这里找到它们：Create、Understand 和 Apply 主题。