如何移除Angular Material 14中mat-form-field输入框的下划线？

为什么appearance="none"不行？ #

Angular Material 14尚未支持appearance="none"属性值，该选项是在Angular Material 15及以上版本才引入的，因此你会遇到类型不匹配的错误，这个方案在14版本中无法使用。

修复CSS穿透无效的问题 #

你之前的CSS样式未生效，核心原因是没有正确通过::ng-deep突破Angular的视图封装机制，同时选择器优先级不足。试试下面的写法：

/* 移除默认下划线 */
::ng-deep .filter-search-item.mat-form-field-appearance-legacy .mat-form-field-underline {
  display: none !important;
}

/* 同时移除焦点状态下的下划线波纹高亮 */
::ng-deep .filter-search-item.mat-form-field-appearance-legacy .mat-form-field-ripple {
  display: none !important;
}

注意：

• ::ng-deep必须放在选择器最前方，确保样式能穿透到MatFormField的内部DOM元素
• 合并类选择器（.filter-search-item.mat-form-field-appearance-legacy）可以提升优先级，避免被组件默认样式覆盖

替代方案：切换外观类型后隐藏下划线 #

如果不想使用legacy外观，可以换成fill类型，再用同样的方式隐藏下划线：

<div class="filter-search">
   <mat-form-field appearance="fill" class="filter-search-item">
      <input type="search" matInput />
    </mat-form-field>
    <mat-icon matPrefix class="my-icon">search</mat-icon>
</div>

对应的CSS：

::ng-deep .filter-search-item.mat-form-field-appearance-fill .mat-form-field-underline {
  display: none !important;
}
::ng-deep .filter-search-item.mat-form-field-appearance-fill .mat-form-field-ripple {
  display: none !important;
}

额外提示：修正图标布局 #

你当前将mat-icon放在mat-form-field外部，无法自动作为输入框的前缀图标，建议调整到组件内部：

<div class="filter-search">
   <mat-form-field appearance="legacy" class="filter-search-item">
      <mat-icon matPrefix class="my-icon">search</mat-icon>
      <input type="search" matInput />
    </mat-form-field>
</div>

这样图标会正确显示在输入框内部左侧，符合Material Design的布局规范。

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