如何在Angular Material Dialog中避免使用::ng-deep设置样式

以下是几种官方推荐的替代方案：

1. 在全局样式文件中定义样式 #

直接在项目的全局样式文件（比如styles.css/styles.scss）里添加样式即可，全局样式不受组件样式隔离规则限制，能直接作用到mat-dialog-container：

.mat-dialog-container {
  overflow: hidden;
}

如果不想影响所有对话框，可以结合自定义类缩小作用范围，具体见下方方案。

2. 给对话框添加自定义面板类 #

通过对话框的panelClass参数传入自定义类名，再针对该类编写样式，既能避免全局污染，又不需要::ng-deep：

步骤1：打开对话框时传入自定义类 #

this.dialog.open(YourTargetDialogComponent, {
  panelClass: 'custom-overflow-hidden-dialog'
});

步骤2：编写对应样式 #

可以放在全局样式文件，或当前组件样式文件中：

.custom-overflow-hidden-dialog .mat-dialog-container {
  overflow: hidden;
}

3. 关闭组件的样式封装 #

在对话框组件的装饰器中设置encapsulation: ViewEncapsulation.None，关闭组件的样式隔离，此时组件内的样式会全局生效，直接编写目标样式即可：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-dialog',
  templateUrl: './your-dialog.component.html',
  styleUrls: ['./your-dialog.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourDialogComponent { }

然后在该组件的样式文件中添加：

.mat-dialog-container {
  overflow: hidden;
}

注意：这种方式会让组件内所有样式全局生效，建议配合自定义类使用，避免样式冲突。

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