Angular Mat-dialog出现双滚动条，如何保留内滚动条并移除外层？

针对你遇到的Dialog同时显示外层容器滚动条和内容区滚动条的问题，可以通过以下步骤解决：

• 打开Dialog时指定自定义面板类，避免影响全局所有Dialog：
  在调用dialog.open()时添加panelClass配置：

  this.dialog.open(YourDialogComponent, {
    panelClass: 'hide-dialog-overflow',
    // 保留你原有的其他配置项（如宽高设置）
  });
  

• 在全局样式文件（如styles.scss）中添加自定义类的样式：
  由于Dialog容器是挂载在根组件之外的，组件内的CSS会被Angular视图封装隔离，无法直接作用到它，所以需要用全局样式覆盖：

  .hide-dialog-overflow {
    overflow: hidden !important;
  }
  

• 保留内容区的滚动行为：
  官方示例中的mat-dialog-content元素默认已经配置了overflow: auto和合适的最大高度，无需修改这部分，它会自动保留内部滚动条。

之前尝试的overflow:hidden没生效，核心原因是样式作用域的限制——组件内的CSS无法触达Dialog的外层容器。用全局样式+自定义面板类的方式可以精准解决问题，同时不会影响其他Dialog的正常表现。

内容的提问来源于stack exchange，提问作者Pedro Henrique Gomes