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

无法测试但是。我有一个类似的声音问题，卡看起来不高。我只需要将它们从硬左侧填上。

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

Answer 3

你也可以试试这个：

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

Answer 4

我认为更改z-index并不是最佳选择。更好的解决方案是向您的sidenav组件添加透明背景。

mat-sidenav-container {
   background: transparent;
   
   mat-sidenav {
      background: transparent; // that one is also necessary if you have mode="side" on your mat-sidenav element
   }
}

像魅力一样为我工作。

Answer 5

我解决了以下问题：

CSS:

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

然后在我的模板中：

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

Answer 6

如果更改z-index无效，请添加以下类：

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

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

Answer 7

检查你是否有一个类 .mat-drawer-container（你需要在你的 CSS 文件中搜索，因为如果你定义了背景，这个层会使你的阴影导航栏过载）

您需要将.mat-drawer-container背景设置为“无”

.mat-drawer-container {
  background: none !important;
}

这将解决您的问题！

Answer 8

以您的样式添加它：

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