Angular material toolbar not inheriting from angular materials

Question

I want to integrate a nav bar on the left side of my application. But the inheriting in css seems not to work.

the nav toolbar should inherit like in the video the style from angular material "IF" I got it right. Right now there is basically nothing inherited. I have no errors in the console and im sure, I have imported roboto etc.

I'm guided with a youtube video since I'm new in this field: https://www.youtube.com/watch?v=Q6qhzG7mObU I updated my npm and ng. Furthermore I used 'ng add @angular/material' for making sure everything is configured and imported correctly.

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; }

this is the auto generated template for a material toolbar 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>

and here the css with the problem:

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

Now the result I actually get is this:

Thanks for help :D

Answer 1

You just need to add color="primary" in mat-toolbar of mat-sidenav. So, in your code :

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