如何自定义 Angular Material Sidenav 组件？

Question

我正在使用 Angular 4 和 Angular Material 建立聊天，我正在尝试在 sidenav 上显示一些信息。我正在使用来自 Angular Material 的 sidenav，但我愿意自定义样式并摆脱打开 sidenav 时出现的阴影。

在 styles.css 文件中我尝试了这个：

.mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown {
    transition: background-color .4s cubic-bezier(.01,.1,.25,1); 
    background-color: transparent;

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

我也试过用::ng-deep但是不行。

Answer 1

您可以使用 mode="side"，它不会创建背景。

<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>

见docs

如何自定义 Angular Material Sidenav 组件？

How can I customize Angular Material Sidenav Component?

css

nav

angular-material2

angular