如何为Angular Material的mat-select下拉框设置四角圆角

下面提供几种实用实现方式，你可以根据项目需求选择：

方法一：组件内局部样式（仅针对指定mat-select） #

先给目标mat-select添加自定义类名：

<mat-select placeholder="选择选项" class="rounded-select">
  <mat-option value="option1">选项1</mat-option>
  <mat-option value="option2">选项2</mat-option>
</mat-select>

然后在组件的样式文件（.component.scss/.css）中添加穿透样式，打破Angular的组件样式隔离：

::ng-deep .rounded-select .mat-mdc-select-trigger {
  border-radius: 8px; /* 按需调整圆角大小 */
}

::ng-deep .rounded-select .mat-mdc-select-panel {
  border-radius: 8px; /* 下拉面板的圆角 */
}

注：如果你的Angular Material是旧版本（非MDC重构版本），类名替换为mat-select-trigger和mat-select-panel即可。

方法二：全局样式（所有mat-select生效） #

如果希望项目中所有mat-select都带有圆角，直接在全局样式文件（如styles.scss）中添加：

.mat-mdc-select-trigger {
  border-radius: 8px;
}

.mat-mdc-select-panel {
  border-radius: 8px;
}

方法三：通过自定义主题配置（推荐，全局统一风格） #

如果项目使用Angular Material的SCSS主题系统，可以在主题文件中统一配置圆角：

@use '@angular/material' as mat;

// 定义圆角大小
$select-border-radius: 8px;

@include mat.select-theme($your-custom-theme, (
  trigger: (
    border-radius: $select-border-radius
  ),
  panel: (
    border-radius: $select-border-radius
  )
));

这种方式无需样式穿透，完全遵循Material Design的主题规范，适合需要全局统一UI风格的场景。

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