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 9 · Accepted Answer · answered Aug 06 '20 at 10:21

9

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
1

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
Why though? why does Angular Material set a specific background color for this? even if this is somehow part of the Material Design spec, it will cause visual regressions for whomever implements this. bad choice, if you ask me :/ It also requires implementors in existing projects to have to apply custom styling as-a-fix, instead of customization. that's bad DX if you ask me... – Michahell Jul 13 '23 at 09:11

1 Answers1