Angular Material UI进度条样式修改：CSS改颜色无效的解决方法

Angular的组件样式封装机制会阻止组件内CSS穿透到Material组件内部，直接写样式自然无法覆盖默认效果，下面是几种可行的解决方式：

方法1：使用::ng-deep穿透样式（快速生效） #

在组件的CSS/SCSS文件中，用::ng-deep强制突破样式封装，针对buffer模式的进度条，需要分别修改填充部分和缓冲部分的颜色：

::ng-deep .mat-progress-bar-fill::after {
  background-color: #ff5722; /* 替换成你需要的填充色 */
}

::ng-deep .mat-progress-bar-buffer {
  background-color: #ffccbc; /* 替换成缓冲区域的浅色 */
}

方法2：修改全局样式文件（无穿透，更稳定） #

在项目根目录的styles.scss（或styles.css）中直接添加样式，全局样式不受组件封装限制，能直接覆盖默认样式：

.mat-progress-bar-fill::after {
  background-color: #ff5722;
}

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

如果只想修改特定进度条，可以给目标进度条添加自定义类，再结合类选择器精准控制：

<mat-progress-bar class="hp-progress" mode="buffer" [value]="element.HP" [bufferValue]="element.HP"></mat-progress-bar>

对应的全局样式：

.hp-progress .mat-progress-bar-fill::after {
  background-color: #ff5722;
}

.hp-progress .mat-progress-bar-buffer {
  background-color: #ffccbc;
}

方法3：自定义Angular Material主题（官方推荐） #

如果需要统一修改整个项目的Material组件样式，推荐用官方的主题自定义方案：

1. 在项目中新建主题文件（比如theme.scss），定义自定义调色板并应用到进度条：

@import '~@angular/material/theming';

@include mat-core();

// 定义自定义主色调、强调色、警告色
$custom-primary: mat-palette($mat-teal);
$custom-accent: mat-palette($mat-orange);
$custom-warn: mat-palette($mat-red);

// 创建自定义主题
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

// 将主题应用到进度条组件
@include mat-progress-bar-theme($custom-theme);

2. 在styles.scss中引入这个主题文件：

@import './theme.scss';

这种方式会让进度条自动使用主题中的强调色作为填充色，实现全局样式统一，符合Material设计规范。

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