Angular 2 Material: Sidenav how to remove backdrop

Question

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

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

however this isn't having any affect. I have tried display none, visibility hidden, etc. It seems like the style for the backdrop is being put out inline to a tag and I would have thought the important would override it. However this isn't working... Anyone have any ideas that don't involve me stripping out the backdrop tag/ altering the styles via javascript during rendering?

Answer 1

@Input() hasBackdrop: any - Whether the drawer container should have a backdrop while one of the sidenavs is open. If explicitly set to true, the backdrop will be enabled for drawers in the side mode as well.

(c) https://material.angular.io/components/sidenav/api

So you should just set property [hasBackdrop]="false" on mat-sidenav-container

Answer 2

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

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

The recommended way is to use ViewEncapsulation. In your component add the following encapsulation:

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

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

Then your css will work and override the styles with your custom styles.

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

Answer 3

Add ::ng-deep to overrided the defualt prebuilt stylesheet css.

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

Plunker demo

You can also use display: none to completely remove the backdrop from the DOM. In this case, sidenav will not close when clicked in backdrop area.

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

Plunker example