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

Posted 2023-02-24

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

【英文标题】：Angular 6,7 How to apply default theme color to mat-sidenav background?

【发布时间】：2019-06-12 10:07:02

【问题描述】：

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

【参考方案1】：

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

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

我的 mat-sidenav 是这样的：

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

【参考方案2】：

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

在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 团队的文档。

2019 年 12 月 12 日更新

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

2020 年 10 月 1 日更新

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

【讨论】：

但是这些是针对自定义组件的，我正在尝试修改已经创建的组件，sidenav 表面。

@Germán 你能详细说明一下吗？

以上这些指南适用于自定义组件。但我正在使用有角材料提供的组件。所以这不适用于这种情况。

示例中sidenav是文件夹中的一个组件，有ts、html等。我正在使用带有材质组件的提供的侧导航，隐式的，而不是作为组件创建的。

@Germán 我认为您没有检查侧导航组件的 html，它仅使用材料侧导航。