css - mat-toolbar 与 mat-sidenav 的宽度不匹配

Question

学习 Angular Material 设计。我创建了一个侧导航并在其中放置了一个垫子工具栏，但垫子工具栏没有占据其父侧导航的全宽，在其右侧显示了一些白线(这是其背景颜色 parent ) 我怎样才能去除白色背景

main-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>`

主导航.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;
}

Working stackblitz can be found here