mat-工具栏与mat-sidenav不匹配

Question

学习角度材料设计。我创建了一个侧导航，并在它里面放置了一个垫子工具栏，但是mat不接受它的父侧导航的全部宽度，在它的右侧显示一些白线(这是它的父侧的背景颜色)如何删除白色背景。

​

​

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

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

工作堆栈闪电战可以找到这里