所以我使用角度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; }