Angular Material进度条颜色被vendor.js覆盖，求颜色来源及自定义方法

核心问题解答：vendor.js中的#6200ee来源 #

这个紫色是Angular Material MDC版本的默认Accent主题色。从你看到的mat-mdc-前缀可以判断，你使用的是Angular Material v15+版本（该版本全面切换为基于MDC的组件实现），vendor.js中的样式是Angular Material打包时内置的默认主题样式，默认主题里的accent色值就是#6200ee，当你没有自定义主题时，组件会直接调用这套默认样式。

为什么你的自定义样式无效？ #

你编写的样式都是针对旧版mat-progress-bar-*类的，但新版本组件渲染后会生成mat-mdc-progress-bar-*前缀的类；同时mode="query"的进度条有专属的样式规则，默认主题的样式优先级高于你自定义的样式，导致你的修改被覆盖。

解决方法 #

方法1：直接覆盖MDC版本的样式 #

使用正确的mat-mdc-前缀选择器，确保样式优先级足够：

/* 针对mode="query"的进度条修改颜色 */
.mat-mdc-progress-bar[mode=query] .mdc-linear-progress__buffer-bar,
.mat-mdc-progress-bar[mode=query] .mdc-linear-progress__buffer-dots,
.mat-mdc-progress-bar[mode=query] .mdc-linear-progress__bar-inner {
  background-color: #005288;
}

/* 针对其他mode的进度条补充样式（可选） */
.mat-mdc-progress-bar .mdc-linear-progress__buffer-bar,
.mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
  background-color: #005288;
}

注意：将这段代码放在site.css或项目最后加载的样式文件中，保证加载顺序在Angular Material样式之后。

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

这是更规范的全局修改方式，通过主题变量替换颜色，避免样式覆盖冲突：

1. 在你的主题文件（如material-themes.scss）中定义自定义主题：

@use '@angular/material' as mat;

// 定义自定义颜色（#005288对应蓝色系的深色值）
$custom-primary: mat.define-palette(mat.$blue-palette);
$custom-accent: mat.define-palette(mat.$blue-palette, 700);
$custom-warn: mat.define-palette(mat.$red-palette);

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

// 全局应用主题
@include mat.all-component-themes($custom-theme);

2. 确保该主题文件被正确引入项目（比如在angular.json的styles数组中配置，或在主样式文件中导入）。

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