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