如何在Angular中减小mat-select组件中选项的高度？

默认的mat-option组件有固定的内边距和高度（默认48px），导致时间选择列表占用过多垂直空间，增加用户滚动成本。可以通过自定义CSS调整选项高度，以下是几种可行方案：

方案1：组件内局部修改（推荐） #

在组件的CSS文件中使用::ng-deep穿透样式隔离，仅作用于当前组件内的选项：

:host ::ng-deep .mat-option {
  /* 自定义选项高度，按需调整数值 */
  height: 32px !important;
  /* 保持文字垂直居中 */
  line-height: 32px !important;
  /* 去除上下内边距，保留左右默认内边距保证点击区域 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

方案2：全局样式修改 #

如果需要整个项目的mat-option都使用小高度，可在全局样式文件（如styles.css）中添加：

.mat-option {
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 16px !important;
}

方案3：自定义类精准控制 #

给目标mat-option添加自定义类，针对性修改样式：

1. 更新模板代码：

<mat-form-field appearance="fill">
  <mat-select name="departureTime" ngModel>
    <mat-option *ngFor="let option of options" [value]="option" class="small-time-option">
      {{ option | time }}
    </mat-option>
  </mat-select>
</mat-form-field>

2. 添加组件内样式：

:host ::ng-deep .small-time-option {
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
}

注意事项 #

• 调整高度时，确保line-height与height值一致，保证文字垂直居中
• 避免过度缩小高度，需保证选项文字完整显示且点击区域足够
• 使用:host ::ng-deep可避免样式污染全局其他组件

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