Angular 材质 sidenav 和扩展插入填充到左侧，为什么？答案

【问题标题】：Angular material sidenav and expansion insert padding to the left, why?Angular 材质 sidenav 和扩展插入填充到左侧，为什么？
【发布时间】：2020-05-21 11:01:18
【问题描述】：

我尝试制作最简单的可折叠左侧导航栏，
但它不会粘在左边，而是被填充了
所以它最终会出现在页面中间。

没有 CSS。
填充量取决于单词“Overview”的长度。

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <mat-sidenav-content>
      <mat-expansion-panel>

        <mat-expansion-panel-header>
          <mat-panel-title>
            Overview
          </mat-panel-title>
        </mat-expansion-panel-header>
      </mat-expansion-panel>

    </mat-sidenav-content>

  </mat-sidenav>

  <mat-sidenav-content>
      <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

【问题讨论】：

标签： angular angular-material mat-sidenav

【解决方案1】：

很多人都有<mat-sidenav-content>，也就是第一个。

正确的代码应该是：

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <mat-expansion-panel>

      <mat-expansion-panel-header>
        <mat-panel-title>
          Overview
        </mat-panel-title>
      </mat-expansion-panel-header>

    </mat-expansion-panel>

  </mat-sidenav>

  <mat-sidenav-content>
      <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

【讨论】：