角材料19造型工具栏不起作用

Question

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>

当我将以下代码放入主题中时，它可以正常工作。Scss

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

但是当我尝试

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

        )
    );
}

Insidenav.component.scss它不起作用。

当我将其添加到theme.scss中时，所有工具栏都是样式的，但是如果我只想在组件内设计特定的工具栏怎么办？是不可能的吗？同样，垫子 - 西德纳夫（Mat-Sidenav）内部的垫子式底座没有样式，至少不是容器颜色，但这可能与Sidenav容器造型有关吗？

Edit：这也是完整的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)
        )
    );
}

silly我...实际上，我只有两个不同的NAV组件在不同的路线上运行，我一直在看错误的视图。