Angular Material 10.2.7中为指定mat-select的cdk-overlay-pane添加自定义类

方法1：直接使用mat-select的panelClass输入属性 #

这是最直接的实现方式，无需额外TypeScript逻辑，直接在目标mat-select标签上指定自定义类即可：

<mat-select [panelClass]="'customClass'">
  <!-- 下拉选项内容 -->
</mat-select>

若需动态切换类，可绑定组件内的变量：

<mat-select [panelClass]="isNeedCustom ? 'customClass' : ''">
</mat-select>

方法2：通过ViewChild修改MatSelect的panelClass属性 #

如果需要在组件逻辑中动态设置类，可通过ViewChild获取目标MatSelect实例，直接修改其panelClass属性（避开已废弃的overlayDir）：

import { ViewChild, AfterViewInit } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  // 组件元数据
})
export class YourTargetComponent implements AfterViewInit {
  @ViewChild(MatSelect) targetSelect: MatSelect;

  ngAfterViewInit() {
    // 单个类
    this.targetSelect.panelClass = 'customClass';
    // 多个类可传入数组
    // this.targetSelect.panelClass = ['customClass', 'additionalClass'];
  }
}

此方式仅会影响你指定的那个mat-select，不会全局生效。

方法3：自定义指令（适合复用场景） #

如果需要在多个组件中给特定mat-select统一添加类，可封装自定义指令：

import { Directive, Input, OnInit } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Directive({
  selector: '[appCustomSelectOverlay]'
})
export class CustomSelectOverlayDirective implements OnInit {
  @Input() overlayClass = 'customClass';

  constructor(private matSelect: MatSelect) {}

  ngOnInit() {
    this.matSelect.panelClass = this.overlayClass;
  }
}

在模板中使用指令：

<mat-select appCustomSelectOverlay [overlayClass]="'customClass'">
</mat-select>

以上方法均适配Angular Material 10，无需依赖高版本API，可精准控制单个mat-select的overlay样式。

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