Angular中如何修改已触碰的Material表单字段边框颜色

你的问题出在两个地方：一是选择器没命中Material表单的实际样式元素，二是Angular的视图封装机制阻止了组件内样式穿透到Material的内部组件结构。下面是几种可行的解决方案：

方案1：全局样式文件修改（推荐） #

把样式放到styles.css（或styles.scss）这类全局样式文件中，直接覆盖Material默认样式：

/* 聚焦状态下的外边框颜色 */
.mat-form-field.mat-focused .mat-form-field-outline-thick {
  color: green !important;
}

/* 触碰（交互后未聚焦，标签浮起）状态下的外边框颜色 */
.mat-form-field.mat-form-field-should-float .mat-form-field-outline-thick {
  color: green;
}

/* 若使用下划线样式表单，修改下划线颜色 */
.mat-form-field.mat-focused .mat-form-field-underline {
  background-color: green !important;
}

方案2：组件内用::ng-deep穿透视图封装 #

如果只想在当前组件内生效，可使用::ng-deep（虽官方不推荐长期使用，但仍是组件内修改第三方库样式的常用方式）：

/* my.component.css */
::ng-deep .matFormField.mat-focused .mat-form-field-outline-thick {
  color: green !important;
}

::ng-deep .matFormField.mat-form-field-should-float .mat-form-field-outline-thick {
  color: green;
}

/* 下划线样式表单的修改 */
::ng-deep .matFormField.mat-focused .mat-form-field-underline {
  background-color: green !important;
}

方案3：关闭组件视图封装 #

在组件元数据中关闭视图封装，让组件内样式变为全局样式（注意避免污染其他组件）：

// my.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class MyComponent {
  // 组件逻辑
}

然后在组件CSS中编写样式：

.matFormField.mat-focused .mat-form-field-outline-thick {
  color: green !important;
}

/* 其他状态样式同方案1 */

补充提示 #

• 若使用Outline样式表单，.mat-form-field-outline-thick是控制边框实际颜色的元素，.mat-form-field-outline是外层透明边框；
• !important多数时候是必须的，因为Material默认样式优先级较高；
• 如需修改错误状态样式，可搭配.mat-form-field-invalid类编写对应规则。

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