Angular Material 15中如何修改单个MatSelect组件的样式

要修改单个mat-select的尺寸和字体，Angular Material官方推荐通过自定义CSS类+样式穿透的方式，既不会破坏全局主题配置，也能精准定位目标组件：

步骤1：给目标组件添加自定义类 #

在模板中给需要修改的mat-select加上专属类名（比如small-language-select）：

<div class="translator">
  <mat-select 
    class="small-language-select"
    id="languageMenu" 
    [(ngModel)]="selectedLang"
    (selectionChange)="changeLanguage($event)">
    <mat-option *ngFor="let lang of languages" [value]="lang.value">
      {{lang.viewValue}}
    </mat-option>
  </mat-select>
</div>

步骤2：编写组件内样式（穿透封装） #

在组件的.scss（或.css）文件中，使用:host ::ng-deep结合自定义类，覆盖mat-select的核心样式：

:host ::ng-deep .small-language-select {
  /* 修改选择器整体尺寸 */
  .mat-select-trigger {
    font-size: 0.875rem; /* 更小的字体 */
    height: 32px; /* 降低高度，默认约40px */
    line-height: 32px;
  }

  /* 修改下拉选项的字体与高度 */
  .mat-option {
    font-size: 0.875rem;
    height: 32px;
  }
}

关键说明： #

• :host确保样式只作用于当前组件内的元素，避免全局污染
• ::ng-deep用于穿透Angular的样式封装，访问MatSelect内部的子元素（如mat-select-trigger、mat-option）
• 仅针对自定义类下的MatSelect子元素修改，不会影响其他mat-select实例

如果项目使用SCSS和Angular Material主题系统，也可通过自定义变体mixins实现，但对于单个实例来说，上述样式覆盖的方式更轻量直接。

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