Angular 2 Material: Sidenav how to remove the background

Question

So, I am using angular cli with material design. I am trying to get rid of the background using sidenav, and I thought it would be as simple as

.mat-sidenav-backdrop.mat-sidenav-shown{
    background-color: transparent !important;
}

however, this does not affect. I tried to display no, visibility is hidden, etc. It seems that the style for the background is being set inline in the tag, and I would have thought it would be overridden. However, this does not work ... Does anyone have any ideas that are not related to the fact that I am removing the backdrop tag / changing styles using javascript during rendering?

Answer 1

::ng-deepworks great in this case, but it may be deprecated in the future. See here :

- , . , Angular ( 3//, → > :: ng-deep). : ng-deep .

- ViewEncapsulation. :

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

css .

.mat-sidenav-backdrop.mat-sidenav-shown{
    background-color: transparent !important;
}

Answer 2

::ng-deep, defualt.

::ng-deep .mat-sidenav-backdrop.mat-sidenav-shown {
    background-color: transparent;
}

display: none DOM. sidenav .

::ng-deep .mat-sidenav-backdrop.mat-sidenav-shown {
    display: none;
} 

Plunker