Angular Material2：如何自定义Progressbar的颜色？

别着急！我之前也踩过这个坑，Angular Material的组件样式封装机制确实会让自定义样式有点难搞，尤其是进度条这种自带主题绑定的组件。下面给你几个亲测有效的方案：

方案1：使用::ng-deep穿透视图封装 #

这是最直接的方式，因为Angular默认的视图封装会阻止组件外的样式影响内部的Material组件，::ng-deep可以打破这个限制。

• 如果是**确定型（determinate）**进度条，在组件的CSS里写：

::ng-deep .mat-progress-bar-fill::after {
    background-color: #2ecc71; /* 替换成你的自定义绿色 */
}

• 如果是**不确定型（indeterminate）**进度条，还要额外修改缓冲层的颜色：

::ng-deep .mat-progress-bar-buffer {
    background-color: rgba(46, 204, 113, 0.2); /* 自定义绿色的淡色背景 */
}

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

注意：如果你的组件设置了encapsulation: ViewEncapsulation.None，可以去掉::ng-deep直接写样式，但这种方式可能影响全局组件，要谨慎使用。

方案2：自定义Angular Material主题（更优雅的全局方式） #

如果你想让这个自定义颜色融入整个项目主题，而不是只改单个组件，可以扩展Material的主题系统：

1. 在全局样式文件（比如styles.scss）里定义自定义颜色：

$custom-green: mat-palette($mat-green, 500); // 也可以直接写十六进制色值
$custom-progress-theme: (
    fill-color: $custom-green,
    buffer-color: rgba($custom-green, 0.2)
);

2. 然后为进度条应用这个自定义主题：

@include mat-progress-bar-theme($custom-progress-theme);

方案3：给目标进度条加自定义类（精准控制） #

为了避免样式污染其他进度条，给需要修改的进度条加个专属类：

<mat-progress-bar class="custom-green-progress" mode="determinate" value="50"></mat-progress-bar>

再结合::ng-deep写样式：

::ng-deep .custom-green-progress .mat-progress-bar-fill::after {
    background-color: #2ecc71;
}

::ng-deep .custom-green-progress .mat-progress-bar-buffer {
    background-color: rgba(46, 204, 113, 0.2);
}

我当时折腾了快一下午，最后用方案3搞定了——既不会影响其他组件，又能精准控制颜色。你可以根据自己的需求选一种试试！

内容的提问来源于stack exchange，提问作者Mka24