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

Question

试图模仿Material guide的外观，我无法将工具栏的阴影渲染到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

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

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

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

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

Answer 2

你也可以试试这个：

.sidenav-container {
  position:fixed;
  width:100%;
  z-index:-1;
}

Answer 3

没能测试但是。我有一个类似的声音问题，卡看起来不高。我只需要从硬左边填充它们。

<mat-sidenav mode="side" opened="true" style="margin: 10px;">

Answer 4

我解决了这个问题如下：

CSS:

.tbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

然后在我的模板中：

HTML:
<mat-toolbar class="mat-elevation-z6 tbar">
  ...
</mat-toolbar>

Answer 5

如果更改z-index不起作用，请添加以下类：

<mat-toolbar class="mat-elevation-z2"></mat-toolbar>

根据角度指南：（https://material.angular.io/guide/elevation）

Answer 6

在你的风格中添加：

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