Angular 5/Material如何移除Mat Dialog中的垂直滚动条？

我之前也碰到过这个棘手的问题，你试过的方法没生效大概率是因为样式隔离或者私有属性访问的问题，试试下面这几个靠谱的方案：

方案1：全局样式直接覆盖（简单直接） #

直接在你的全局样式文件（比如styles.css/styles.scss）里添加这段代码：

.mat-dialog-container {
  overflow-y: hidden !important;
}

提示：如果Material的默认样式优先级更高，加上!important能确保你的样式生效，但尽量少用，除非必要。

方案2：组件内用::ng-deep穿透样式隔离 #

如果不想污染全局样式，可以在调用对话框的父组件样式文件里用::ng-deep（替代已废弃的/deep/）：

:host ::ng-deep .mat-dialog-container {
  overflow-y: hidden;
}

:host 限定了样式只作用于当前组件关联的对话框，不会影响其他地方的Material Dialog。

方案3：自定义panelClass（最推荐，优雅且可维护） #

这个方法是Material官方推荐的自定义对话框样式的方式，不会有样式冲突的问题：

1. 打开对话框时，在配置里添加自定义的panelClass：

this.dialog.open(YourTargetDialogComponent, {
  // 其他配置项...
  panelClass: 'no-vertical-scroll-dialog'
});

2. 然后在全局样式文件里针对这个类写样式：

.no-vertical-scroll-dialog .mat-dialog-container {
  overflow-y: hidden;
}

为什么你之前的方法没生效？ #

• /deep/ 已经被浏览器和Angular废弃，应该改用::ng-deep；
• 直接访问_overlayContainer._containerElement这种私有属性是不推荐的，Angular的私有API可能在版本更新中变动，而且后续的样式渲染可能会覆盖你设置的行内样式。

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