“顏色”屬性不起作用<mat-toolbar>在 Angular Materia 的側面導航中</mat-toolbar>

Question

我無法讓mat-toolbar根據我的主題改變顏色。 請看我的代碼：

HTML

<mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar color="primary" >Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">
        <mat-icon aria-hidden="false" aria-label="Health Check" color="primary">poll</mat-icon>
        &nbsp; Poll
      </a>
      <a mat-list-item href="#">
        <mat-icon aria-hidden="false" aria-label="Health Check" color="primary">info</mat-icon>
          &nbsp; Announcements
      </a>
    </mat-nav-list>
  </mat-sidenav>

但在內容上，我沒有任何問題。 請看我的代碼。

<mat-sidenav-content>
    <mat-toolbar color="primary">
      <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>

        <a mat-button href="#">
          <mat-icon aria-hidden="false" aria-label="Health Check">accessibility_new</mat-icon>
          Health Check
        </a>
        <span class="spacer"></span>
        <div *ngIf="!isXs">
          <a mat-button href="#">
            <mat-icon aria-hidden="false" aria-label="Health Check">poll</mat-icon>
            Poll
          </a>
          <a mat-button href="#">
            <mat-icon aria-hidden="false" aria-label="Health Check">info</mat-icon>
            Announcements
          </a>
        </div>

    </mat-toolbar>
    <!-- Add Content Here -->
    <ng-content></ng-content>
  </mat-sidenav-content>

這是圖像：

Answer 1

在 mat-nav 組件中需要將 css 從：

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

至

.sidenav {
  background: inherit;
}

當 mat-nav 組件由原理圖創建時會出現此問題。