角度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

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

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在Angular Material Themes完整指南上写了一个非常不错的媒体博客。您可以在主题化自己的组件中找到Angular团队的文档。