Angular Материал - Как изменить цвет фона мата-ящика-контейнера

Question

angular материал mat-drawer-container имеет цвет фона по умолчанию, например, так ..

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

Я бы хотел изменить его на ..

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

I попробовал с ..

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.