Angular Material 15如何修改mat-form-field outline边框及下划线颜色

方法一：通过自定义主题（SCSS变量，官方推荐） #

Angular Material 15基于MDC（Material Design Components）构建，outline样式的表单字段用MDC相关变量控制边框颜色，typography配置仅负责字体样式，确实没有$border属性。

在你的自定义主题SCSS文件中，覆盖对应MDC变量后再生成主题即可：

// 导入Angular Material基础样式
@use '@angular/material' as mat;

// 自定义颜色变量
$custom-outline-default: #6200ee;
$custom-outline-hover: #3700b3;
$custom-outline-focus: #bb86fc;

// 覆盖MDC outline表单字段的边框变量
$mdc-outlined-text-field-container-outline-color: $custom-outline-default;
$mdc-outlined-text-field-container-outline-color-hover: $custom-outline-hover;
$mdc-outlined-text-field-container-outline-color-focus: $custom-outline-focus;

// 生成主题
@include mat.core();
$app-primary: mat.define-palette(mat.$indigo-palette);
$app-accent: mat.define-palette(mat.$pink-palette);
$app-warn: mat.define-palette(mat.$red-palette);
$app-theme: mat.define-light-theme((
  color: (
    primary: $app-primary,
    accent: $app-accent,
    warn: $app-warn,
  ),
));
@include mat.all-component-themes($app-theme);

这种方式会全局应用样式，所有outline类型的mat-form-field都会自动适配默认、悬浮、聚焦状态的边框颜色。

方法二：自定义CSS（适合局部修改） #

如果只需要修改单个组件的样式，要用精准选择器修改原有边框颜色，而不是新增border（这就是你之前出现双层边框的原因）。样式可以放在全局styles.scss中，或者在组件样式里使用::ng-deep（不推荐长期使用）。

示例代码： #

/* 默认状态边框颜色 */
.mat-mdc-form-field.mat-mdc-form-field-appearance-outline .mat-mdc-form-field-outline {
  border-color: #6200ee;
}

/* 鼠标悬浮状态边框颜色 */
.mat-mdc-form-field.mat-mdc-form-field-appearance-outline:hover .mat-mdc-form-field-outline {
  border-color: #3700b3;
}

/* 聚焦状态边框颜色 */
.mat-mdc-form-field.mat-mdc-form-field-appearance-outline.mat-mdc-form-field-focused .mat-mdc-form-field-outline {
  border-color: #bb86fc;
}

/* 若需修改输入框下方的下划线（部分场景outline样式仍显示的下划线） */
.mat-mdc-form-field.mat-mdc-form-field-appearance-outline .mat-mdc-form-field-underline {
  border-color: #6200ee;
}

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