如何调整Angular中mat-select下拉框的高度及文本垂直对齐

要调整mat-select的高度至33px并实现文本垂直对齐，同时不影响下拉面板，需要针对Angular Material组件的内部结构进行样式穿透调整，具体步骤如下：

1. 组件内样式调整（关联的scss文件） #

修改.frequency-dimensions的样式，通过::ng-deep穿透Angular Material的封装样式，调整触发器的高度、内边距和对齐方式：

.frequency-dimensions {
  min-width: 100px;
  width: 100px;

  // 调整下拉触发器的高度与垂直对齐
  ::ng-deep .mat-select-trigger {
    height: 33px;
    display: flex;
    align-items: center; // 实现内容垂直居中
    padding: 0 10px; // 优化左右内边距，避免文本贴边
  }

  // 确保选中的文本行高与触发器高度匹配
  ::ng-deep .mat-select-value {
    line-height: 33px;
  }

  // 调整下拉箭头的垂直位置，避免偏移
  ::ng-deep .mat-select-arrow {
    margin-top: 0;
  }
}

2. 保留下拉面板原有样式（styles.scss） #

原有的.custom-panel-frequency样式无需修改，这样下拉面板的位置和宽度不受主控件高度调整的影响：

.custom-panel-frequency {
  margin: 34px 0px !important;  
  min-width: 100px !important;
}

关键说明 #

• 直接设置mat-select的height属性无效，因为mat-select的高度由内部的.mat-select-trigger元素决定，必须穿透调整该元素的样式。
• 使用display: flex + align-items: center是最可靠的垂直对齐方式，替代无效的vertical-align: middle（后者仅对行内元素生效）。
• 通过::ng-deep确保样式优先级足够覆盖Angular Material的默认样式，避免滥用!important。

这样调整后，mat-select的高度会固定为33px，文本和箭头都垂直居中，下拉面板的样式保持独立，同时能和日期控件的高度匹配。

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