如何在CSS中的Angle-Dart中更改材质抽屉组件的颜色和宽度? [英] How do I change the color and width of material drawer component in angular-dart in css?

问题描述

我的第一个问题-很抱歉，如果我不够具体. 如何在CSS中的Angle-Dart中更改材质抽屉组件的颜色和宽度?我已经在CSS中尝试了几种方法，如下所示:

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;
}

仅供参考，以下内容适用于抬头标记中的material-header:

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;
}

我的材质抽屉不在div或其他任何内容中，仅直接是HTML元素本身.

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

任何指针都值得赞赏！

推荐答案

设置抽屉的宽度有点复杂.它涉及设置大量的值，因此最好使用mixin.您可以在此处

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.

这篇关于如何在CSS中的Angle-Dart中更改材质抽屉组件的颜色和宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！