css – Angular 2材质:Sidenav如何删除背景

前端之家收集整理的这篇文章主要介绍了css – Angular 2材质:Sidenav如何删除背景前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我使用角度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;
}

猜你在找的CSS相关文章