Angular：mat-form-field-outline无效状态hover时颜色设置失效求助

你的问题出在CSS选择器的层级结构错误：.mat-form-field-invalid是mat-form-field元素本身的类，而非.mat-form-field-outline的类，当前嵌套写法无法匹配到目标元素。

正确的CSS写法 #

/* 正常状态下hover的轮廓颜色 */
&.mat-form-field-appearance-outline:not(.mat-form-field-disabled):not(.mat-form-field-invalid) .mat-form-field-flex:hover .mat-form-field-outline {
  color: blue;
}

/* 无效状态下hover的轮廓颜色 */
&.mat-form-field-appearance-outline:not(.mat-form-field-disabled).mat-form-field-invalid .mat-form-field-flex:hover .mat-form-field-outline {
  color: red;
}

关键说明 #

• 将.mat-form-field-invalid直接加到外层的mat-form-field选择器上，和其他状态类并列，确保选择器能精准匹配到处于无效状态且hover的表单域。
• 给正常hover的选择器加上:not(.mat-form-field-invalid)，避免两种状态的样式冲突，保证优先级正确。

如果样式写在组件CSS文件中且开启了Angular视图封装，可在选择器前加::ng-deep穿透封装（该标记虽已被Angular标记为deprecated，但目前仍可使用；也可选择关闭组件视图封装）：

::ng-deep &.mat-form-field-appearance-outline:not(.mat-form-field-disabled):not(.mat-form-field-invalid) .mat-form-field-flex:hover .mat-form-field-outline {
  color: blue;
}

::ng-deep &.mat-form-field-appearance-outline:not(.mat-form-field-disabled).mat-form-field-invalid .mat-form-field-flex:hover .mat-form-field-outline {
  color: red;
}

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