Question

所以我使用角度cli和材料设计。我试图摆脱sidenav的背景，我认为它会像

一样简单

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

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

Answer 1

::ng-deep在这种情况下效果很好，但将来可能会被弃用。见here：

阴影穿透后代组合子已被弃用且支持从主要浏览器和工具中删除。因此我们打算放弃支持Angular（对于所有3个/ deep /，＆gt;＆gt;＆gt;和:: ng-deep）。直到那么:: 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以覆盖defualt预建样式表css。

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

Plunker demo

您还可以使用display: none从DOM中完全删除背景幕。在这种情况下，单击背景区域时，sidenav不会关闭。

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

Plunker example

Answer 3

@Input() hasBackdrop: any-抽屉式容器中的一个容器是否应具有背景   sidenavs是开放的。如果明确设置为true，则背景为   在侧面模式下也为抽屉启用了
。
（c）https://material.angular.io/components/sidenav/api

因此，您应该仅在[hasBackdrop]="false"上设置属性mat-sidenav-container

Answer 4

如果要删除打开模式或Sidenav时出现的不透明层，则需要修改为该元素定义属性visibility的类。就我而言，我想删除打开sidenav时出现的这一层，因此我添加了：

.mat-drawer-shown {
visibility: hidden! important;
}

在styles.scss上。

P.S .：（这个答案是针对2020年的人哈哈） Angular CLI版本（10.1.3）

Answer 5

很简单，不用导入其他东西，不用封装，直接在你的mat-sidenav-container标签里面写上[hasBackdrop]="false"即可。

<mat-sidenav-container [hasBackdrop]="false">

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

5 个答案: