Angular Material - 如何更改 mat-drawer-container 的背景颜色

Question

angular material mat-drawer-container 有默认的背景色，像这样..

.mat-drawer-container {
    background-color: #fafafa;
    color: rgba(0, 0, 0, 0.87);
}

我想把它改成..

.mat-drawer-container {
    background-color: #dddddd;
}

我试过..

encapsulation: ViewEncapsulation.None

和重要就像下面的例子

.mat-drawer-container {
    background-color: #dddddd !important;
}

背景色不会变，还是#fafafa

它适用于 .mat-drawer 但不适用于 mat-drawer-container

有什么想法吗？

Answer 1

不要覆盖现有的 Material 类 - 相反，将您自己的类应用于元素:

<mat-drawer-container class="red-container">
...
</mat-drawer-container>

然后在那个特定的类上设置样式:

.red-container {
  background-color: red;
}

这可以让您避免::ng-deep。