角2材質：シデナブ背景を取り除く方法

Question

材質設計の角度cliを使用しています。私はsidenavと背景を取り除くしようとしていると私はそれが

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

しかし、これはいずれかが影響を与えたされていないような単純なものだろうと思いました。私はディスプレイなし、可視性隠しなどを試みました。バックグラウンドのスタイルがタグにインラインで配置されているように見え、重要なものを上書きすると思ったでしょう。しかし、これは動作していません...誰も私の背景タグを取り除く/レンダリング中にjavascriptを介してスタイルを変更する必要はありません任意のアイデアを持っている？

Answer 1

::ng-deepこのケースで素晴らしい作品が、それは将来的には廃止されることがあります。 hereを参照してください：

シャドーピアス子孫コンビネータが廃止され、サポートは主要なブラウザやツールから 削除されています。そのため、 のサポートをAngularにする予定です（/ deep /、>>>および:: ng-deepの3つすべてに対して）。 まで：:: 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を追加すると、あらかじめ作成されたスタイルシートcssをオーバーライドできます。あなたはまた、完全にDOMから背景を削除するにはdisplay: noneを使用することができます

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

Plunker demo

。この場合、sidenavは背景領域をクリックしても閉じられません。

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

Plunker example