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

Question

角材料 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。