Angular Material MatDialog滚动条不显示及位置异常问题求助

步骤1：配置MatDialog自定义面板类 #

修改弹窗调用代码，新增panelClass参数用于定向修改样式，避免污染全局弹窗组件：

this.dialog.open(ModalComponent, {
  data: {
    isEditHistoric: true
  }, 
  width: '500px', 
  height: '40%',
  panelClass: 'full-scroll-dialog'
}).afterClosed().subscribe((result) => {});

步骤2：添加全局弹窗样式 #

在项目全局样式文件（如src/styles.css）中添加如下规则：

/* 清除弹窗容器默认内边距，让滚动条贴边 */
.full-scroll-dialog .mat-dialog-container {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 配置内容区滚动规则，内边距移到此处保证内容不贴边 */
.full-scroll-dialog mat-dialog-content {
  margin: 0 !important;
  padding: 24px;
  overflow: auto !important;
  flex: 1;
}

/* 若弹窗包含底部操作栏，添加以下规则适配 */
.full-scroll-dialog mat-dialog-actions {
  margin: 0;
  padding: 8px 24px;
  border-top: 1px solid rgba(0,0,0,0.12);
}

步骤3：调整内部表格样式 #

在app-mycomponent组件的样式文件中添加如下规则，保证表格宽度随内容正常撑开：

table[mat-table] {
  width: max-content;
  min-width: 100%;
}

步骤4：恢复overlay容器默认样式 #

改回你之前修改的全局overlay规则，避免弹窗定位异常：

.cdk-overlay-container, .cdk-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100% !important;
  width: 100% !important;
}

可选适配：调整ModalComponent根样式 #

如果弹窗结构仍有高度异常，在ModalComponent的样式文件中添加如下规则：

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

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