如何全局覆盖Mat Select底部边框并隐藏该下划线？

要全局隐藏所有Mat Select的底部下划线，你可以在styles.scss中添加以下CSS规则，利用样式穿透覆盖Angular Material组件的默认样式：

• 方案一：直接隐藏下划线容器（彻底移除下划线区域）

::ng-deep .mat-mdc-form-field-subscript-wrapper {
  display: none;
}

• 方案二：精准针对Mat Select组件，避免影响其他表单字段

::ng-deep mat-select .mat-mdc-form-field-subscript-wrapper {
  display: none;
}

• 方案三：通过修改下划线元素高度实现隐藏

::ng-deep .mat-mdc-form-field-underline {
  height: 0;
}

将上述任意一种规则添加到全局的styles.scss中，即可让更改应用到整个应用的所有Mat Select组件，彻底隐藏底部下划线。

说明：::ng-deep用于突破Angular的组件样式隔离机制，确保全局样式能穿透到Mat Select的内部结构，在全局样式文件中使用该选择器是稳定有效的。

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