如何自定义 Angular Material Sidenav 组件？答案

【问题标题】：How can I customize Angular Material Sidenav Component?如何自定义 Angular Material Sidenav 组件？
【发布时间】：2017-08-05 16:34:13
【问题描述】：

我正在使用 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，但它不起作用。

【问题讨论】：

我不确定您提交此问题时文档是否有此信息，但现在已记录在案。这是示例部分的链接，其中演示了 sidenav 组件具有的所有选项。在尝试自行自定义之前，您应该检查一下。 material.angular.io/components/sidenav/examples

标签： css angular nav angular-material2

【解决方案1】：

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

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

见docs

【讨论】：

谢谢！这实际上是我想要的。甚至内容看起来也更好，因为它没有被推送和隐藏。谢谢！！！