How do I change the color and width of material drawer component in angular-dart in css?

Question

My first question ever - so apologies if I am not specific enough. How do I change the color and width of material drawer component in angular-dart in css? I have tried it several ways in the CSS, including as below:

::ng-deep material-drawer {
  color: #9437FF;
  width: 200px;
}

.material-drawer {
  color: #9437FF;
  width: 200px;
}

FYI, the following worked with the material-header, which is inside a header tag:

::ng-deep header.material-header.material-header {
  background-color: white;
  color: #9437FF;
}

My material-drawer is not in a div or anything, just directly an HTML element on its own.

Any pointers are appreciated!

"just directly an HTML element on its own." If its not a <div> what is is? — Alex
The material-drawer is defined as follows in the html file: <material-drawer persistent #drawer="drawer" [visible]="drawerOpen"> <material-list *deferredContent> … Whereas the material-header is as follows (in a header): <header class="material-header"> <div class="material-header-row"> ... — Adi Mishra

Ted Sander Ted Sander · Accepted Answer · 2018-07-19T05:53:07

Setting the width of the drawer is a bit complicated. It involves setting a good amount of values as such it is best to use the mixin. You can see an example here

As for the color that is a little bit harder. What color are you trying to change? The background color?

For the background color you can set the background-color on the drawer. The problem is going to be that the content itself is going to override that color. In this case the material-list has it's own white color associated with it. Removing that color you could have problems with the divider colors.

How do I change the color and width of material drawer component in angular-dart in css?

1 Answers