Angular Material mat-select如何为.cdk-overlay-pane添加自定义类避免全局影响

可以实现，你不需要手动修改生成的DOM结构，Angular Material 已经为mat-select提供了自定义面板类的专用API，操作方式如下：

1. 给你的mat-select标签添加panelClass输入属性，指定自定义类名：

<mat-select [formControl]="你的表单控件" panelClass="custom-select-overlay">
  <!--  mat-option 选项内容 -->
</mat-select>

添加后点击select生成的cdk-overlay-pane元素会自动挂载你指定的自定义类，最终的DOM结构和你示例中想要的效果完全一致。

2. 调整你的样式代码，仅针对带自定义类的cdk-overlay-pane生效，避免影响其他组件：

::ng-deep .cdk-overlay-pane.custom-select-overlay {
  transform: translateX(-40px) translateY(-13px) !important;
}

如果想要进一步限定作用范围，避免全局类名冲突，可以加上:host选择器，仅当前组件内的mat-select面板会生效：

:host ::ng-deep .cdk-overlay-pane.custom-select-overlay {
  transform: translateX(-40px) translateY(-13px) !important;
}

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