如何覆盖Angular Material 15表单字段的悬浮效果？

要移除outline样式的mat-form-field悬浮时的黑色边框，核心是针对目标样式类提升优先级或绕过Angular的视图封装限制，以下是几种可行方案：

方案一：使用::ng-deep穿透视图封装（组件内样式） #

在组件的SCSS/CSS文件中添加以下代码，直接穿透Angular的视图封装覆盖目标样式：

/* 移除聚焦状态下的黑色边框 */
::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-thick {
  border-color: transparent !important;
}

/* 若需要同时移除标签浮动时的边框，补充以下样式 */
::ng-deep .mat-form-field.mat-form-field-float-label.mat-focused .mat-form-field-outline-thick {
  border-color: transparent;
}

注：!important用于确保样式优先级高于Angular Material的默认样式，若不需要强制覆盖，可尝试去掉后测试效果。

方案二：全局样式文件中直接覆盖 #

将样式写在项目根目录的styles.scss（或styles.css）里，无需穿透封装，直接覆盖默认样式：

.mat-form-field.mat-focused .mat-form-field-outline-thick {
  border-color: transparent;
}

如果只需针对特定组件生效，可给目标mat-form-field添加自定义类，缩小选择范围：

<mat-form-field appearance="outline" class="no-focus-border">
  <!-- 输入框内容 -->
</mat-form-field>

.no-focus-border.mat-focused .mat-form-field-outline-thick {
  border-color: transparent;
}

方案三：关闭组件视图封装（不推荐） #

在组件装饰器中关闭视图封装，让组件内样式直接作用于全局，但可能导致样式污染，需谨慎使用：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent { }

关闭后即可在组件内直接写样式覆盖：

.mat-form-field.mat-focused .mat-form-field-outline-thick {
  border-color: transparent;
}

你之前尝试直接覆盖.text-field--outlined无效，是因为Angular的视图封装机制会给组件内样式添加唯一属性选择器（如[_ngcontent-xxx]），导致你的样式优先级低于Material的默认样式，以上方案均可解决优先级问题。

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