Angular Material 19自定义Toolbar样式不生效问题排查

我是Angular新手，正在理解组件样式覆盖机制。获取代码后尝试修改mat-sidenav-content内的mat-toolbar颜色。

nav.component.html代码如下：

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav
        #drawer
        class="sidenav"
        fixedInViewport
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="(isHandset$ | async) === false"
    >
        <mat-toolbar class="my">Menu</mat-toolbar>
        <mat-nav-list>
            @for (item of menuItems; track $index) {
                <a mat-list-item [routerLink]="'/app/' + item.path"> {{ item.label }} </a>
            }
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar class="my">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <span>Title</span>
            <span class="example-spacer"></span>
            @if (isLoggedIn()) {
                <button mat-flat-button (click)="logout()">
                    <mat-icon>logout</mat-icon>
                    <span>Logout</span>
                </button>
            } @else {
                <button mat-flat-button (click)="login()">
                    <mat-icon>login</mat-icon>
                    <span>Login</span>
                </button>
            }
        </mat-toolbar>
        <!-- Add Content here -->
        <div class="content">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

将以下代码放入theme.scss时可生效：

:root {
  @include mat.toolbar-overrides((
    container-background-color: black,
  ));
}

但在nav.component.scss中尝试以下代码却无效：

.my{
    @include mat.toolbar-overrides(
        (
            container-background-color: black,
        )
    );
}

疑问：

1. 在theme.scss中添加会样式化所有Toolbar，如何仅样式化组件内的特定Toolbar？
2. mat-sidenav内的mat-toolbar未被样式化（容器颜色未改变），这是否与sidenav容器样式有关？

附完整nav.component.scss代码：

@use '@angular/material' as mat;

.sidenav-container {
    height: 100%;
}

.sidenav {
    width: 200px;
}

.sidenav .mat-toolbar {
    background: inherit;
}

.mat-toolbar.mat-primary {
    position: sticky;
    top: 0;
    z-index: 1;
}

.content {
    padding: 20px;
}

.example-spacer {
    flex: 1 1 auto;
}

.my{
    @include mat.toolbar-overrides(
        (
            container-background-color: black,
            container-text-color: var(--mat-sys-on-primary)
        )
    );
}

一、仅样式化组件内特定Toolbar的方法 #

Angular Material的mat.toolbar-overrides是全局主题混入，只能在主题层级（如theme.scss）使用，无法直接在组件SCSS中通过类选择器调用。要实现局部样式覆盖，有两种可行方案：

方案1：主题层级针对特定类名配置 #

在theme.scss中针对.my类定义Toolbar主题覆盖，仅对带有该类的Toolbar生效：

@use '@angular/material' as mat;

// 替换$your-theme为你项目中实际的主题变量（如$light-theme）
.my {
  @include mat.toolbar-theme($your-theme, (
    container-background-color: black,
    container-text-color: var(--mat-sys-on-primary)
  ));
}

方案2：组件内使用深度选择器穿透 #

如果不想修改全局主题文件，可在组件SCSS中用::ng-deep打破Angular样式隔离，直接覆盖Toolbar的底层样式：

.my::ng-deep .mdc-toolbar {
  background-color: black;
  color: var(--mat-sys-on-primary);
}

提示：若样式优先级足够，可省略!important；.mdc-toolbar是Angular Material Toolbar对应的MDC底层类名。

二、sidenav内Toolbar未生效的原因 #

你的nav.component.scss中有一行代码会覆盖sidenav内Toolbar的背景色：

.sidenav .mat-toolbar {
    background: inherit;
}

这行代码让sidenav里的Toolbar继承父元素（.sidenav）的背景色，直接覆盖了.my类的样式。解决方法：

• 直接删除这行代码；
• 或修改为仅对不带.my类的Toolbar生效：

.sidenav .mat-toolbar:not(.my) {
    background: inherit;
}

内容的提问来源于stack exchange，提问作者hadamard