如何在无需重写组件及CSS的情况下减小MatInput和MatSelect的高度

这题我熟！不用大动干戈重写整个组件或者堆一堆自定义CSS，有几个轻量又靠谱的方案可以试试：

1. 用官方自带的密度配置（最推荐） #

Angular Material本身提供了密度系统，可以直接通过调整密度级别来缩小组件尺寸，而且官方已经帮你处理好了选中状态、hover状态等各种场景的样式适配，完全不用自己写额外CSS。

使用方法很简单：

• 单个组件设置：直接给mat-select加上density属性，负数代表缩小，比如：

  <mat-select density="-2">
    <!-- 选项内容 -->
  </mat-select>
  

  密度级别范围是-3到+5，数值越小组件越紧凑，你可以根据需求调整。
• 全局统一设置：在你的Material主题配置里全局设置默认密度，这样所有MatSelect都会生效：

  @import '@angular/material/theming';
  
  @include mat-core($density-config: mat-density-config(-2));
  // 后续主题配置代码...
  

2. 局部覆盖关键CSS类（精细自定义） #

如果密度配置的效果达不到你的需求，可以用局部样式覆盖关键类，不会污染全局样式。这里推荐用:host ::ng-deep来限定作用范围，只影响当前组件内的MatSelect：

/* 减小表单字段的底部内边距 */
:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
  padding-bottom: 0.5em;
}

/* 调整触发区域的高度和文字垂直居中 */
:host ::ng-deep .mat-select-trigger {
  height: 32px;
  line-height: 32px;
}

/* 确保选中值的文字垂直居中 */
:host ::ng-deep .mat-select-value {
  line-height: 32px;
}

这个方案可以精准控制高度，而且针对选中状态的文字对齐也做了适配，不会出现文字错位的问题。

3. 修改主题变量（全局统一自定义） #

如果需要全局所有MatSelect都使用自定义高度，可以在Material主题的SCSS文件里修改官方提供的变量：

@import '@angular/material/theming';

// 自定义选中状态下的触发区域高度
$mat-select-trigger-height: 32px;

// 继续你的主题配置
@include mat-core();
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);

修改后重新编译主题，所有MatSelect的高度都会统一应用这个值，包括选中状态的样式适配。

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