所以我使用角度cli与材料设计.我试图摆脱sidenav的背景,我认为这将是如此简单
- .mat-sidenav-backdrop.mat-sidenav-shown{
- background-color: transparent !important;
- }
但这没有任何影响.我试过显示无,隐藏可见性等等.似乎背景的样式被内联到标签,我会认为重要的将覆盖它.然而,这不起作用…任何人有任何想法,不涉及我剥离背景标签/在渲染过程中通过JavaScript改变样式？
解决方法
:: ng-deep在这种情况下效果很好,但将来可能会被弃用.见
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.
建议的方法是使用ViewEncapsulation.在组件中添加以下封装：
- import { ViewEncapsulation } from'@angular/core';
- @Component({
- ....
- encapsulation: ViewEncapsulation.None
- })
然后你的css将工作并覆盖自定义样式的样式.
- .mat-sidenav-backdrop.mat-sidenav-shown{
- background-color: transparent !important;
- }
