Angular 材质中的 MdProgressBar 缓冲区背景颜色答案

【问题标题】：MdProgressBar buffer background color in Angular MaterialAngular 材质中的 MdProgressBar 缓冲区背景颜色
【发布时间】：2017-12-25 06:12:33
【问题描述】：

我正在使用来自 Angular Material 的 progress bar 并尝试自定义样式。我可以简单地通过设置元素本身的样式（例如md-progress-bar { border: 1px solid black }）来设置进度部分（缓冲区？）的边框、半径、颜色，但我不能为栏添加背景颜色。如果我通过开发工具更改 .mat-progress-bar-buffer 的背景颜色，它可以工作，但如果不是通过组件 css（或任何其他 css，就此而言）。

所以，这不起作用：

.mat-progress-bar-buffer {
  background-color: $white;
}

我还能尝试什么？

编辑：here 是一个简单的玩偶。

【问题讨论】：

试过了！重要吗？
是的，当然:)
我不确定他们在.mat-progress-bar-background 中使用了background-image 和一些svg。
尝试打开 plunker，在开发工具中找到该元素。如果你添加 background-color: white ，它会起作用。
plunker 不工作，顺便说一句干净的状态。

标签： css angular angular-material progress-bar

【解决方案1】：

不确定这是否会更好，但是由于 /deep/ 和 >>> 将从浏览器支持中弃用，因此 Angular 有自己的方式来使用 ::ng-deep 模拟这一点，并且在找到更好的解决方案之前是首选方式.

Documentation on angular 表示它将被弃用，但是在github vicb 上提到他们没有计划在不久的将来删除::ng-deep。

用法类似于/deep/:

::ng-deep .mat-progress-bar-buffer {}

【讨论】：

我知道 /deep/ 即将消失，但我现在需要这个。无论如何，关于:host ::ng-deep :)

【解决方案2】：

嗯，这是由于 ViewEncapsulation。如果我添加/deep/ .mat-progress-bar-buffer，则应用该样式。

我仍然想找到一个更好的解决方案（/deep/ 几乎没有了）。

【讨论】：