移除 Mat-Select 下划线

在使用 Angular Material 的 mat-select 组件时，有时会希望移除下拉选项框的下划线。这里将介绍如何通过 CSS 来实现这个效果。

步骤

1. 首先，在你的 Angular 项目中打开对应的组件样式文件（通常是 component.scss）。

2. 使用以下 CSS 代码来移除 mat-select 组件的下划线:

   ::ng-deep .mat-select-base .mat-select-value .mat-select-arrow-wraper {
     border-bottom: none !important;
   }
   

   这段 CSS 代码仅仅影响了 mat-select 组件的下拉选项框。

3. 保存文件，并重新编译你的 Angular 项目。

现在，打开包含 mat-select 组件的页面，你会发现下拉选项框的下划线已经被成功移除了。

注意: ::ng-deep 这个伪类选择器是用来使样式渗透到 Angular 组件的 Shadow DOM 内部，因为 mat-select 组件是通过 Shadow DOM 技术实现的。

希望以上介绍对你有所帮助！如果你还有其他问题，请随时提问。