md-menu的md-overlay-container在Angular 2中未對齊材質

Question

我正在使用Angular 2材質創建應用程序，並試圖在md-sidenav-layout部分中添加材質菜單。但是，菜單的觸發器顯示在頁面的不同部分。

app.component.ts-我的主要成分，是自舉

@Component({ 
     selector: 'app-root', 
     template: ` 
     <navbar></navbar> 
     <sidenav #tests></sidenav> 
     ` 
    }) 

sidenav.component.ts- sidenav組件。我指的是https://github.com/angular/material2/blob/master/src/lib/menu/README.md來創建菜單。

@Component({ 
     selector: 'sidenav', 
     template: ` 
      <md-sidenav-layout> 
       <md-sidenav #start [opened]="sidenavStatus()" (close)="reset()"> 
        <md-card> 
         <p class="profile-name">Username</p> 
        </md-card> 

        <md-list class="sidenav-list"> 
         <md-list-item> Add Steps </md-list-item> 
         <md-list-item> Add Sections </md-list-item> 
         <md-list-item> Add Fields </md-list-item> 
        </md-list> 
        <br>    
       </md-sidenav> 

       //the actual content in the page 
       <md-menu #menu="mdMenu"> 
        <button md-menu-item> Refresh </button> 
        <button md-menu-item> Settings </button> 
        <button md-menu-item> Help </button> 
        <button md-menu-item disabled> Sign Out </button> 
       </md-menu> 
       <md-card class="step-card"> 
        <md-card-title>Card with title 
         <md-icon>more_vert</md-icon> 
         //button which is used to trigger the menu 
         <button md-icon-button [md-menu-trigger-for]="menu"> 
          <md-icon>more_vert</md-icon> 
         </button>      
        </md-card-title> 
        <md-card-content> 
          <p>This is supporting text.</p> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p> 
        </md-card-content> 
       </md-card>   
      </md-sidenav-layout> 
     `, 
     styleUrls: ['./app/sidenav/sidenav.component.css'] 
    }) 

在頁面呈現其創建的應用程序根外與被抵消菜單的實際位置的變換CSS屬性一個新的div（主要成分）。

呈現的DOM：

渲染UI：

我缺少什麼？當我嘗試添加應該在sidenav之外的實際內容時，即使是偏移到sidenav結束的位置。

Answer 1

要解決出現在內容或應用程序區域下方的對話框或菜單問題，只需導入角色的材質預構建主題之一或創建自己的主題。

預置的主題名稱

• deeppurple-amber.scss
• 靛藍pink.scss
• 粉bluegrey.scss
• 紫green.scss

，如果你正在使用sass

import ‘~@angular/material/core/theming/prebuilt/[name-of-the-themes].scss'; 

這是你如何創建一個主題

創建一個SASS或者SCSS文件

@import '~@angular/material/core/theming/all-theme'; 
// Plus imports for other components in your app. 

// Include the base styles for Angular Material core. We include this here so that you only 
// have to load a single css file for Angular Material in your app. 
@include mat-core(); 

// Define the palettes for your theme using the Material Design palettes available in palette.scss 
// (imported above). For each palette, you can optionally specify a default, lighter, and darker 
// hue. 
$candy-app-primary: mat-palette($mat-indigo); 
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400); 

// The warn palette is optional (defaults to red). 
$candy-app-warn: mat-palette($mat-red); 

// Create the theme object (a Sass map containing all of the palettes). 
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 

// Include theme styles for core and each component used in your app. 
// Alternatively, you can import and @include the theme mixins for each component 
// that you are using. 
@include angular-material-theme($candy-app-theme); 

，包括它在你的styles.scss文件

實例主題是從角材質文檔採取https://material.angular.io/guide/theming

也有類似的問題Angular Material2 md-select dropdown appears at bottom of the page