Reputation: 627
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
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