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

Question

angular 材质 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

和important 如下例所示

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

背景颜色不会改变，它仍然是#fafafa

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

有什么想法吗？

Answer 1

不要覆盖现有的材质类 - 而是将您自己的类应用于元素：

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

并在该特定类上设置样式：

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

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