Angular Material 2: Sidenav has no background

Question

I am currently developing the Angular 2 site and have some problems with the SideNav component.

SideNav can have 3 modes, none of which will change what happens when I open Sidenav. I try to open the background after opening.

SideNav opens, but the background is not displayed.

The root of the application is the md-sidenav container . The component SideBarwill also be passed to the component NavBar, since the open button is defined there.

Please note that I also tried to bring the component SideBarout<md-sidenav-container>

<md-sidenav-container>
    <sidebar #sideBarComponent></sidebar>
    <navbar [sideBar]=sideBarComponent></navbar>
    <router-outlet></router-outlet>
</md-sidenav-container>

SidNnav currently contains 2 links and is set to "over" mode (which should create SideNav and background for the main content)

<md-sidenav #sideBar mode="over">
    <md-nav-list>
        <a md-list-item routerLink="/home" (click)="sideBar.close()" routerLinkActive="active-link">
            <md-icon md-list-icon>home</md-icon>
            <p md-line>Home</p>
        </a>
        <a md-list-item routerLink="/users" (click)="sideBar.close()" routerLinkActive="active-link">
            <md-icon md-list-icon>account_circle</md-icon>
            <p md-line>Users</p>
        </a>
    </md-nav-list>
</md-sidenav>

chrome , (<div class="md-sidenav-backdrop"></div>) , - , CSS. ( , , , )

prebuild-css , .md-sidenav-shown:

.md-sidenav-backdrop.md-sidenav-shown {
    background-color: rgba(0, 0, 0, .6)
}

-, ? , , - , , .

( ):

Angular 2.4.1
   common
   core
   compiler
   forms
   http
   platform-browser
   platform-browser-dynamic
   router
Angular-Material 2.0.0-Beta.1
SystemJs 0.19.41
Core-js 2.4.1
Reflect-Metadata 0.1.8
Typescript 2.1.4
RxJs 5.0.1
HammerJS 2.0.6
Zone.js 0.7.4  

Answer 1

, md-sidenav , md-sidenav-container md-sidenav . md-sidenav-container @ContentChildren md-sidenav.

, md-sidenav-container md-sidenav .

Answer 2

CSS, your.component.css, , Angular CSS/SCSS/SASS "" CSS, .

CSS .md-sidenav-backdrop.md-sidenav-shown {...} :

.md-sidenav-backdrop.md-sidenav-shown[_ngcontent-xyh-65] {
    background-color: rgba(0, 0, 0, .6)
}

Angular . , <div class="md-sidenav-backdrop"></div> (, ). , [_ngcontent-xyh-65] .

, , - CSS <root>/src/styles.css. :. , , CSS, styles.css. :

md-sidenav-container > .md-sidenav-backdrop.md-sidenav-shown {
    background-color: rgba(0, 0, 0, .6)
}