放置在Angular中mat-sideNav顶部时的mat-toolbar边距

Question

我是Angular框架的新成员，正在尝试学习它。我试图将mat-toolbar放在sidenav之上，并尝试了以下方法，但是工具栏始终从顶部有一定的余量。在单击菜单按钮时，我正在更改主要内容div的边距。下面是我的css文件和html文件：一切工作正常，但是只有mat-toolbar中的边距是问题。请帮忙。

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: aqua;
}

.example-sidenav {
  padding: 2px;
  /*margin-top: 60px;*/

}

.sideDiv{
  height: 100vh;
  margin: 0;
}

.toolDiv{
  height: 60px;
  background: blueviolet;
  margin: 0;
}

mat-toolbar{
  margin: 0;
}

以下是我的html文件：

    <div class="toolDiv">
      <mat-toolbar color="primary">
        <button mat-icon-button (click)="toggle()">
          <mat-icon>menu</mat-icon>
        </button>
        <h3>Hello Toolbar</h3>
      </mat-toolbar>
    </div>
    <mat-sidenav-container class="sideDiv">
      <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true" [ngStyle]="{ 'width.em': sidenavWidth }">
        <!--<mat-toolbar class="menuBar">Menus</mat-toolbar>-->
        <mat-nav-list>
          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component0</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component1</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>question_answer</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component2</h5>
            </div>
          </a>
          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>person_add</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component3</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>account_circle</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component4</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component5</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component6</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component7</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component8</h5>
            </div>
          </a>
        </mat-nav-list>

      </mat-sidenav>

      <mat-sidenav-content [ngStyle]="{ 'margin-left.em': sidenavContentMargin }">

        <div class="example-sidenav-content">
          <router-outlet></router-outlet>
        </div>
      </mat-sidenav-content>

    </mat-sidenav-container>