мат-панель инструментов не соответствует ширине с мат-сиденав

Question

Обучение угловому материалу дизайна. Я создал боковую навигацию, и внутри нее я поместил панель инструментов mat, но панель инструментов mat не берет всю ширину родительской навигации, показывая некоторую белую линию на правой стороне (которая является цветом фона его родитель) Как убрать белый фон

главный-nav.component.html

`<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 color="primary">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>printhouse</span>
    </mat-toolbar>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>`

основного nav.component.css

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
 box-shadow:  2px 0 6px rgba(0,0,0,0.24);

}

.sidenav .mat-toolbar {
  /* background: inherit; */

 }


.mat-toolbar.mat-primary {
  position:sticky;
  top: 0;
  z-index: 1;

}

Как убрать белый фон

Answer 1

Добавьте в свой CSS следующее:

.mat-drawer-side {
  border: none;
}

Рабочий стек может быть найден здесь