如何在css中更改angular-dart中材质抽屉组件的颜色和宽度？答案

【问题标题】：How do I change the color and width of material drawer component in angular-dart in css?如何在css中更改angular-dart中材质抽屉组件的颜色和宽度？
【发布时间】：2018-07-12 14:19:31
【问题描述】：

我的第一个问题 - 如果我不够具体，请道歉。如何在css中更改angular-dart中材质抽屉组件的颜色和宽度？我在 CSS 中尝试了几种方法，包括如下：

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

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

仅供参考，以下内容适用于 header 标签内的 material-header：

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

我的 material-drawer 不在 div 或任何东西中，只是一个 HTML 元素本身。

任何指针表示赞赏！

【问题讨论】：

"只是一个单独的 HTML 元素。"如果不是<div> 是什么？
material-drawer 在 html 文件中定义如下： ... 而material-header 如下（在标题中）：
...

标签： angular-dart

【解决方案1】：

设置抽屉的宽度有点复杂。它涉及设置大量的值，因此最好使用 mixin。可以看一个例子here

至于颜色偏硬一点。你想改变什么颜色？背景颜色？

对于背景颜色，您可以在抽屉上设置背景颜色。问题将是内容本身将覆盖该颜色。在这种情况下，材质列表具有与之相关的自己的白色。删除该颜色可能会导致分隔线颜色出现问题。

【讨论】：