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的背景颜色与我们用来获取工具栏颜色的主题相同< / p>

Answer 1

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

在style.scss

中定义主题

定义组件主题，例如my-component.component.scss-theme.scss。这可以与my-component.component.scss不同。您可以将主题文件中的主题（颜色和版式）和非主题文件中的其他内容（大小，位置等）分开。
在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团队的文档。

Answer 2

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

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

和我的 mat-sidenav 像这样：

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

角度6.7如何将默认主题颜色应用于mat-sidenav背景？

2 个答案: