css - Angular - Material : Progressbar custom color?

Question

我现在正在尝试几个小时。我使用 Material2，只是想更改进度条的颜色。我知道有这些主题(主要/强调/警告)，但我想为我的进度条设置自定义颜色(绿色)。

我已经尝试过最奇怪的 css 组合.. 但没有任何努力。也许有人有同样的问题？

Answer 1

你可以使用::ng-deep 选择器来实现你想要的，this answer有一些关于它的信息。

我是怎么做到的:

CSS

::ng-deep .mat-progress-bar-fill::after {
    background-color: #1E457C;
}

::ng-deep .mat-progress-bar-buffer {
    background: #E4E8EB;
}

::ng-deep .mat-progress-bar {
    border-radius: 2px;
}

HTML

<mat-progress-bar  mode="determinate" value="{{progress}}"></mat-progress-bar>

结果是这样的:

编辑:

我找到了一种避免使用 ::ng-deep 的方法，因为它很快就会从 angular 中移除。 似乎如果您将样式从 component.css 文件移动到全局 styles.css 文件，它在没有 的情况下也能工作: :ng-deep.

因此，上面定义的样式可以在

mat-progress-bar .mat-progress-bar-buffer {
  background: #E4E8EB;
}

将它移动到 styles.css 它将像这样应用:

后期编辑

解释为什么在全局样式表中设置样式有效:

For components the default is that angular adds a attribute to each DOM-element of a component, and then adds the same attribute to every class in the css for the same component. Adding styles to a global stylesheet does not add these attributes, hence the style will be applied. (thanks Jompis for this)

这对我的新元素很有用。我没有专门检查旧代码，但条件相同，没有理由不工作。