Angular中mat-input边框颜色无法修改的问题求助

你遇到的核心问题是Angular的样式封装机制阻止了组件内CSS穿透到Material组件的内部元素，另外如果表单控件处于invalid状态（比如未输入内容触发验证），Material会默认应用错误状态的边框颜色（通常是紫色），这也是你之前的CSS没覆盖到的场景。

下面是有效的解决方案：

方案1：使用::ng-deep穿透样式（组件内生效） #

在组件的CSS文件中添加以下代码，覆盖所有状态的边框颜色，包括默认、hover、focus、invalid：

/* 默认状态边框颜色 */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  color: red !important;
}

/* hover状态边框颜色 */
::ng-deep .mat-form-field-appearance-outline:hover .mat-form-field-outline {
  color: blue !important;
}

/* focus状态边框颜色 */
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline {
  color: green !important;
}

/* invalid状态边框颜色（你看到的紫色来源） */
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
  color: red !important;
}

方案2：全局样式文件中添加（全局生效） #

如果不想用::ng-deep，可以在styles.css（或styles.scss）全局样式文件中写入上述CSS（去掉::ng-deep），样式会全局覆盖所有mat-form-field：

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: red !important;
}

.mat-form-field-appearance-outline:hover .mat-form-field-outline {
  color: blue !important;
}

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

.mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
  color: red !important;
}

方案3：关闭组件的View Encapsulation #

在组件的TS文件中设置encapsulation: ViewEncapsulation.None，让组件内CSS全局生效，无需::ng-deep：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class LoginComponent {
  // 你的组件逻辑代码
}

之后在组件CSS中添加方案2的代码即可。

关键说明 #

• 你看到的紫色边框，大概率是表单控件处于invalid状态（比如未填写username/password触发验证），必须覆盖mat-form-field-invalid类的样式才能替换该颜色。
• !important用于确保你的样式优先级高于Material默认样式，避免被覆盖。

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