Angular 2材质:Sidenav如何去除背景

Question

所以我使用角度cli与材料设计.我试图摆脱sidenav的背景,我认为这将是如此简单

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

但这没有任何影响.我试过显示无,隐藏可见性等等.似乎背景的样式被内联到标签,我会认为重要的将覆盖它.然而,这不起作用...任何人有任何想法,不涉及我剥离背景标签/在渲染过程中通过JavaScript改变样式？

Answer 1

@Input() hasBackdrop: any- 当其中一个 sidenavs 打开时，抽屉容器是否应该有背景。如果明确设置为 true，则侧边模式下的抽屉也将启用背景。

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

所以，你应该只设置属性[hasBackdrop]="false"上mat-sidenav-container

Answer 2

::ng-deep在这种情况下效果很好,但将来可能会被弃用.看到这里:

不推荐使用阴影穿透后代组合器,并且正在从主要浏览器和工具中删除支持.因此,我们计划放弃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;
}