Angular Material v16中mat-form-field/matInput样式自定义问题

问题分析 #

你之前用::ng-deep加!important的写法会强制覆盖输入框所有状态下的边框样式，导致聚焦、报错时本该显示的默认蓝色/红色边框被绿色覆盖，破坏了组件原有状态逻辑。

解决方案一：精准控制状态选择器（组件/局部样式） #

通过:not()伪类限定仅在未聚焦且无错误的状态下应用自定义样式，完全保留组件原有交互行为：

/* 未交互状态（未聚焦、无错误）的边框颜色 */
.mat-mdc-form-field:not(.mat-mdc-form-field-focused):not(.mat-mdc-form-field-invalid) .mdc-notched-outline__leading,
.mat-mdc-form-field:not(.mat-mdc-form-field-focused):not(.mat-mdc-form-field-invalid) .mdc-notched-outline__notch,
.mat-mdc-form-field:not(.mat-mdc-form-field-focused):not(.mat-mdc-form-field-invalid) .mdc-notched-outline__trailing {
  border-color: green;
}

/* 未交互状态的占位符颜色 */
.mat-mdc-form-field:not(.mat-mdc-form-field-focused):not(.mat-mdc-form-field-invalid) .mdc-text-field__input::placeholder {
  color: #666;
}

/* 未交互状态的mat-label颜色 */
.mat-mdc-form-field:not(.mat-mdc-form-field-focused):not(.mat-mdc-form-field-invalid) .mdc-floating-label {
  color: #666;
}

解决方案二：自定义主题（全局统一配置） #

如果需要全局所有mat-form-field都应用该样式，推荐通过Angular Material主题系统配置，更符合框架设计规范：

@use '@angular/material' as mat;

// 定义自定义主题
$custom-theme: mat.define-theme(
  mat.define-light-theme(
    (
      color: (
        primary: mat.define-palette(mat.$blue-palette),
        accent: mat.define-palette(mat.$pink-palette),
        warn: mat.define-palette(mat.$red-palette),
        // 配置未激活状态的字段样式
        fields: (
          outline-color: green,
          label-text: #666,
          placeholder-text: #666,
        )
      )
    )
  )
);

// 应用主题到所有组件
@include mat.all-component-themes($custom-theme);

注意事项 #

• 移除之前的::ng-deep和!important代码，避免样式冲突
• 组件级样式无需添加::ng-deep，直接使用上述选择器即可生效（确保组件的encapsulation未设置为ViewEncapsulation.None）
• 主题配置需在全局样式文件（如theme.scss）中定义，并在angular.json中引入

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