Angular2 +材质:mat-toolbar在mat-sidenav-container上没有阴影,尽管mat-elevation-z*

Question

试图模仿材质指南的外观,我无法将工具栏的阴影渲染到mat-sidenav-container元素的顶部:

• 链接到显示工具栏和sidenav 的页面,但不显示阴影.
• 链接到仅显示工具栏的页面,渲染阴影

看到HTML代码,它不能更简单.我错过了什么？谢谢...

app.component.html

<mat-toolbar class="mat-elevation-z6" color="primary">
  toolbar
</mat-toolbar>

<mat-sidenav-container >

  <!-- Side menu -->
  <mat-sidenav mode="side" opened="true">

    <h3>Menu 1</h3>
    <ul>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/">dashboard</a>
      </li>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/resolutions">resolutions</a>
      </li>
    </ul>

    <!-- List resolutions -->
    <h3>Menu 2</h3>
    <ul>
      <li>
        <a>incentive</a>
      </li>
    </ul>

  </mat-sidenav>

  <!-- Routed contents -->
  <div class="contents">
    <router-outlet></router-outlet>
  </div>

</mat-sidenav-container>

Answer 1

将此添加到您的样式中：

.mat-toolbar {
  position: relative;
  z-index: 2;
}

Answer 2

有完全相同的问题.我通过在CSS中添加以下类来解决它:

.sidenav-container {
  z-index: -1 !important;
}

并将其添加到mat-sidenav-container中

<mat-sidenav-container class="sidenav-container">
...
</mat-sidenav-container>