如何使用Angular Material的Mat Dialog仅显示自定义组件并隐藏自身？

完全可以实现，核心是通过MatDialog的配置项结合自定义CSS彻底清除Dialog的默认痕迹，比单纯硬写CSS更可靠：

步骤1：配置Dialog打开参数 #

调用dialog.open()时传入关键配置，从根源上关闭Dialog的默认元素：

• hasBackdrop: false：直接禁用Dialog的背景遮罩，彻底解决背景残留问题
• panelClass: 'custom-dialog-panel'：指定自定义样式类，清除Dialog容器的默认样式
• disableClose: true（可选）：不需要点击外部关闭组件就加上，反之设为false
• position（可选）：自定义组件的显示位置，比如居中或固定坐标

示例代码：

import { MatDialog } from '@angular/material/dialog';
import { YourCustomComponent } from './your-custom.component';

// 组件类内部
constructor(private dialog: MatDialog) {}

openCustomComponent() {
  this.dialog.open(YourCustomComponent, {
    hasBackdrop: false,
    panelClass: 'custom-dialog-panel',
    disableClose: true,
    position: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' } // 居中示例
  });
}

步骤2：添加自定义CSS清除Dialog容器样式 #

在全局样式文件（比如styles.css）中添加以下样式，覆盖MatDialog容器的默认样式：

.custom-dialog-panel .mat-dialog-container {
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

注意：不要放在组件局部样式里（除非关闭ViewEncapsulation），否则样式可能无法穿透Dialog容器。

额外注意点 #

• 自定义组件的背景、边框等样式直接在组件内部编写即可，不会受Dialog影响
• 需要关闭组件时，直接调用Dialog实例的close()方法即可

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