角材料工具栏不继承角材料

Question

我想在应用程序左侧集成一个导航栏。但是在CSS中继承似乎无效。

导航工具栏应该像视频中的样式一样继承自正确的角度材料“ IF”。现在基本上没有任何继承。我在控制台中没有错误，而且我确定已经导入了roboto等。

由于我是该领域的新手，所以我向其推荐了youtube视频： https://www.youtube.com/watch?v=Q6qhzG7mObU 我更新了npm和ng。此外，我使用了“ 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"的{​​{1}}中添加mat-toolbar。因此，在您的代码中：

mat-sidenav