Angular 2 Material: Sidenav 如何删除背景

Question

所以我使用 angular cli 和 material 设计。我正在尝试使用 sidenav 摆脱背景，我认为它会像

一样简单

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

但这没有任何影响。我试过显示 none、隐藏可见性等。似乎背景样式被内嵌到标签中，我本以为重要的会覆盖它。然而，这是行不通的......任何人有任何想法不涉及我在渲染期间通过 javascript 剥离背景标签/改变样式？

Answer 1

添加 ::ng-deep 以覆盖默认的预构建样式表 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 2

::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;
}

Answer 3

@Input() hasBackdrop: any - Whether the drawer container should have a backdrop while one of the sidenavs is open. If explicitly set to true, the backdrop will be enabled for drawers in the side mode as well.

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

所以你应该在 mat-sidenav-container

上设置属性 [hasBackdrop]="false"

Answer 4

如果您想删除打开模态或侧导航时出现的不透明层，您需要修改为该元素定义属性 visibility 的 class。就我而言，我想删除打开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 Material: Sidenav 如何删除背景

Angular 2 Material: Sidenav how to remove backdrop

angular-material

angular-material2

angular