Панель инструментов углового материала, не наследуемая от угловых материалов

Question

Я хочу добавить навигационную панель в левой части моего приложения.Но наследование в css, похоже, не работает.

панель инструментов nav должна наследовать, как в видео, стиль от углового материала "IF", я понял это правильно.Прямо сейчас в принципе ничего не передается по наследству.У меня нет ошибок в консоли, и я уверен, что я импортировал roboto и т. Д.

Я руководствуюсь видео на YouTube, так как я новичок в этой области: https://www.youtube.com/watch?v=Q6qhzG7mObU Я обновил свой npmи нг.Кроме того, я использовал 'ng add @ angular / material', чтобы убедиться, что все настроено и импортировано правильно.

app.module.ts:

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.css:

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

это автоматически сгенерированный шаблон для панели инструментов материала main-nav-component.ts:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</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>
      <span>XML-ConfiguratorV2</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

и вот css с проблемой:

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

СейчасНа самом деле я получаю следующий результат:

Спасибо за помощь: D

Answer 1

Вам просто нужно добавить color="primary" в mat-toolbar из mat-sidenav.Итак, в вашем коде:

...
<mat-sidenav-container ...>
    <mat-sidenav ...>
        <mat-toolbar color="primary">Menu</mat-toolbar> // Note : color="primary" at this line
    </mat-sidenav>
</mat-sidenav-container>
...