移除mat-select的下划线（@angular/material 15.0.3版本）

针对你使用@angular/material ^15.0.3版本想要隐藏mat-select下划线的需求，之前的方法失效原因如下：

• Angular Material 15全面迁移到MDC（Material Design Components）框架，原有的mat-form-field-underline类名已变更为mat-mdc-form-field-underline，同时底部还有一个由mat-mdc-form-field-bottom-align::before生成的线条，所以旧选择器无法生效
• appearance="none"并非Angular Material 15中MatFormFieldAppearance的合法取值，该版本仅支持fill、outline、standard三种外观，因此会触发类型错误

可行解决方案 #

方法1：组件内样式配合自定义类（使用::ng-deep）

给mat-form-field添加自定义类，再通过正确的选择器隐藏线条：

模板代码：

<mat-form-field 
  style="margin: 2em 2em 2em 2em"
  appearance="fill"
  class="no-underline"
>
  <mat-label>Choose an option</mat-label>
  <mat-select>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

组件CSS代码：

::ng-deep .no-underline .mat-mdc-form-field-underline {
  display: none;
}

/* 移除底部额外的对齐线条 */
::ng-deep .no-underline .mat-mdc-form-field-bottom-align::before {
  display: none;
}

方法2：全局样式（无需::ng-deep）

如果不想使用::ng-deep，可以在项目根目录的styles.scss（或全局样式文件）中添加以下代码，同样配合自定义类使用：

.mat-form-field.no-underline .mat-mdc-form-field-underline,
.mat-form-field.no-underline .mat-mdc-form-field-bottom-align::before {
  display: none;
}

两种方法都能彻底隐藏mat-select所在form-field的下划线，根据你的样式隔离需求选择即可。

内容的提问来源于stack exchange，提问作者Young'un