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

Question

试图模仿Material guide的外观，我无法将工具栏的阴影渲染到mat- sidenav-container元素：

• Link to the page显示工具栏和sidenav，但投影是不可见的。
• Link to the page单独显示工具栏，阴影渲染

查看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; 
} 

，并把它添加到垫sidenav容器

<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; 
}