关于mat-form-field边框颜色版本差异及添加基础颜色修改选项的问询

当然可以修改mat-form-field的基础边框颜色，以下是两种常用的实现方式：

1. 通过Angular Material自定义主题（推荐） #

利用Angular Material的主题系统统一配置，能避免样式冲突，符合Material Design规范。在你的主题SCSS文件（通常是styles.scss或专门的主题文件）中添加如下配置：

@use '@angular/material' as mat;

// 定义自定义主题的基础调色板
$custom-primary: mat.define-palette(mat.$indigo-palette);
$custom-accent: mat.define-palette(mat.$pink-palette);
$custom-warn: mat.define-palette(mat.$red-palette);

// 直接覆盖form-field的边框颜色变量
$mat-form-field-outline-color: #888888; // 替换成你需要的基础灰色
$mat-form-field-outline-focused-color: #1976d2; // 可选：自定义聚焦状态的边框颜色

// 生成并应用自定义主题
$custom-theme: mat.define-light-theme(
  (
    color: (
      primary: $custom-primary,
      accent: $custom-accent,
      warn: $custom-warn,
    ),
  )
);

@include mat.all-component-themes($custom-theme);

2. 全局CSS直接覆盖 #

如果不需要全局主题调整，也可以通过CSS选择器直接覆盖边框样式，适合快速修改：

/* 未聚焦状态的边框 */
.mat-mdc-form-field-appearance-outline .mdc-notched-outline__leading,
.mat-mdc-form-field-appearance-outline .mdc-notched-outline__trailing,
.mat-mdc-form-field-appearance-outline .mdc-notched-outline__notch {
  border-color: #888888 !important;
}

/* 聚焦状态的边框 */
.mat-mdc-form-field-appearance-outline.mat-focused .mdc-notched-outline__leading,
.mat-mdc-form-field-appearance-outline.mat-focused .mdc-notched-outline__trailing,
.mat-mdc-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch {
  border-color: #1976d2 !important;
}

注意：如果使用的是非outline外观的form-field，需要调整对应的CSS选择器（比如.mat-mdc-form-field-appearance-fill）。

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