Angular 角度材质工具栏不从角度材质继承

我想在应用程序的左侧集成导航条。但是css中的继承似乎不起作用

导航工具栏应该像视频中那样继承角度材质的样式“如果”我做对了。现在基本上没有继承的东西。我没有在控制台错误，我肯定，我已经进口机器人等

由于我是这个领域的新手，我在youtube视频的引导下： 我更新了我的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>

现在我实际得到的结果是：

---

感谢您的帮助：D

您只需在

mat sidenav

的

mat工具栏中添加
color=“primary”
。因此，在您的代码中：

。。。
菜单//注意：此行的color=“primary”
...
您是否尝试过包含本手册中提到的标准主题之一？只需添加
@import'@angular/material/prebuild themes/deeppurple amber.css'在你的
样式的顶部。css
。截图在我这边起作用。我是用“ng add”完成的。该样式适用于应用程序，但继承mat sidenav的样式似乎不起作用。“截图”谢谢，成功了。我还必须删除背景：从.sidenav和.mat工具栏继承样式。现在看来我希望是这样。不知道为什么自动生成的模板被破坏了^^’…我也有同样的问题！谢谢大家的评论！
.sidenav .mat-toolbar {
  background: inherit;
}