Angular 16/Material Dialog内嵌组件时标题高度异常过大问题

问题根源 #

Material MDC的.mdc-dialog__title::before伪元素是用来控制标题的间距和对齐逻辑的，当你用div作为matDialogTitle容器时，这个伪元素的默认样式（比如margin-top、content占位）会触发异常的顶部空白；而原生<h2 mat-dialog-title>是组件预期的结构，样式计算正常。

可行解决方案 #

1. 遵循组件原生结构（推荐）

直接用<h2 mat-dialog-title>包裹你的内嵌元素，这是Material设计时预期的用法，能从根源避免样式冲突：

<h2 mat-dialog-title>
  <span>我的标题</span>
  <button mat-icon-button align="end">
    <mat-icon>close</mat-icon>
  </button>
</h2>

2. 强制覆盖样式（应急方案）

如果必须用div作为容器，需要提升自定义样式的优先级，确保能覆盖Material的默认样式：

• 在全局styles.scss中使用更具体的选择器（结合你的对话框组件类名）：

// 假设你的对话框组件类名为app-custom-dialog
app-custom-dialog .mdc-dialog__title::before {
  content: none !important;
  margin-top: 0 !important;
}

• 或者在组件内使用::ng-deep（注意：官方不推荐长期使用，但针对第三方样式覆盖是有效的）：

::ng-deep .mdc-dialog__title::before {
  display: none !important;
}

3. 通过Sass变量自定义主题（优雅方案）

如果你的项目使用Material的Sass主题系统，可以直接修改Dialog标题的相关变量，避免硬编码样式覆盖：

@use '@angular/material' as mat;

// 定义自定义主题，覆盖Dialog标题的伪元素样式
$custom-dialog-theme: mat.define-theme(
  (
    components: (
      dialog: (
        title: (
          before-element-display: none,
          top-padding: 16px, // 按需调整为你需要的间距
        )
      )
    )
  )
);

// 应用主题到所有组件
@include mat.all-component-themes($custom-dialog-theme);

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