CODEWITHSUNDEEP
angularangular-material
user12163165
user12163165

Reputation: 627

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

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?

Upvotes: 2

Views: 9872

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4820

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.

Upvotes: 10

Related Questions