Angular Material - How to change the background color of mat-drawer-container

Question

angular material mat-drawer-container has default background-color like so..

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

I'd like to change it to..

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

I tried with..

encapsulation: ViewEncapsulation.None

and important like in the following example

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

the background-color won't change, it's still #fafafa

it works for .mat-drawer but not for mat-drawer-container

any ideas?

have you tried `::ng-deep .mat-drawer-container { background-color: #dddddd; }` ? — Bargros, Aug 05 '20 at 23:00
It works, thank you for that!, I'm using angular material v10 and it still works! I was sure `::ng-deep ` is going to be deprecated because of [this](https://stackoverflow.com/q/49859784/12163165) — user12163165, Aug 05 '20 at 23:11
You're welcome, glad I helped. But I'd say be careful of `::ng-deep` it changes the style globally not just within your component, take a look at this [post](https://stackoverflow.com/questions/55370067/override-angular-material-css-differently-in-different-components) for other answers — Bargros, Aug 06 '20 at 02:28
It works but I noticed that it also remove the background of a mat-expansion-panel, so this solution is not good for me. I hope we find a better one. thanks! — user12163165, Aug 06 '20 at 08:46

score 5 · Accepted Answer · answered Aug 06 '20 at 10:21

5

Don't override the existing material classes - instead, apply your own class to the element:

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

And set the style on that particular class:

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

This lets you avoid the ::ng-deep.

answered Aug 06 '20 at 10:21

TotallyNewb

It is definitely a better solution for not using `::ng-deep` but still affect other components for example, it removes the background of a `mat-expansion-panel` – user12163165 Aug 06 '20 at 19:20
It definitely shouldn't - and if it does it's most probably something other from the styles you're applying - it's hard to say, since you didn't provide a stackblitz with example. Check this: https://stackblitz.com/edit/angular-sctdmq where it seems to be working as expected, i.e. not affecting any children components. – TotallyNewb Aug 07 '20 at 07:43
by bad, IT DOES NOT affect other components style. I take it as a solution! thank you again @TotallyNewb – user12163165 Aug 07 '20 at 14:49
This should the the de-facto for styling angular material components. There should a be a section for this in docs too. But, blehhh!! – Pramesh Bajracharya Nov 26 '20 at 05:40

1 Answers1