如何修改Angular Material Dialog的Overlay样式以转移滚动条？

你遇到的核心问题是：.cdk-overlay-container和.cdk-global-overlay-wrapper是全局DOM元素，并非自定义面板类.custom-dialog的子元素，所以你之前的嵌套选择器无法匹配到它们，且组件样式隔离机制也会限制对全局类的修改。以下是几种可行的解决方法：

方法一：使用全局样式文件（推荐针对全局场景） #

直接在项目的全局样式文件（如styles.scss/styles.css）中添加样式，这样不受组件样式隔离的限制：

/* 全局样式文件中 */
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
  pointer-events: auto;
  overflow-y: auto;
}

/* 同时禁用对话框内部的滚动，避免双重滚动条 */
.custom-dialog {
  min-width: 860px;
  max-width: 860px;
  height: max-content;
  overflow: visible !important;
}

注意：此方法会修改所有Angular Material Dialog的Overlay样式。

方法二：通过OverlayRef动态添加自定义类（推荐针对单个Dialog） #

如果只想修改特定Dialog的Overlay样式，可以在打开Dialog时获取overlayRef，给Overlay的宿主元素添加自定义类，再配合全局样式生效：

组件TS代码： #

import { MatDialog } from '@angular/material/dialog';
import { YourDialogComponent } from './path/to/your-dialog.component';

// 在组件类中
constructor(private dialog: MatDialog) {}

openTargetDialog() {
  const dialogRef = this.dialog.open(YourDialogComponent, {
    panelClass: 'custom-dialog'
  });

  // 获取Overlay的宿主元素并添加自定义类
  dialogRef.overlayRef.hostElement.classList.add('target-overlay');
}

全局样式文件中： #

.target-overlay .cdk-global-overlay-wrapper {
  pointer-events: auto;
  overflow-y: auto;
}

.custom-dialog {
  min-width: 860px;
  max-width: 860px;
  height: max-content;
  overflow: visible !important;
}

方法三：正确使用::ng-deep（不推荐，仅作备选） #

如果必须在组件CSS中修改，需要用::ng-deep穿透样式隔离，但要注意作用范围：

/* 组件CSS文件中 */
::ng-deep .cdk-overlay-container,
::ng-deep .cdk-global-overlay-wrapper {
  pointer-events: auto !important;
  overflow-y: auto !important;
}

.custom-dialog {
  min-width: 860px;
  max-width: 860px;
  height: max-content;
  overflow: visible !important;
}

此方法同样会影响所有Dialog，若要精准控制，需结合方法二中的自定义类做更细的选择器匹配。

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