Angular 15独立组件使用MatDialog时部分Material CSS变量未定义

是的，你需要额外导入对应子模块，具体来说：

• 必须导入 MatDialogTitleModule、MatDialogContentModule、MatDialogActionsModule，这些是mat-dialog-title、mat-dialog-content、mat-dialog-actions各自对应的独立模块。

原因说明 #

MatDialogModule仅提供对话框的核心服务和容器基础功能，而标题、内容、操作栏这些UI组件/指令是拆分为单独子模块的。在独立组件或库项目场景下，Angular不会自动导入这些子模块，必须显式声明，否则对应的Material CSS变量和样式规则无法被注入，就会出现部分变量未定义、样式异常的情况。

具体实现示例 #

如果你的组件是独立组件（standalone: true），直接在组件的imports数组中添加这些模块：

@Component({
  selector: 'your-dialog-component',
  standalone: true,
  imports: [
    CommonModule,
    MatDialogModule,
    MatDialogTitleModule,
    MatDialogContentModule,
    MatDialogActionsModule
  ],
  templateUrl: './your-dialog.component.html',
  styleUrls: ['./your-dialog.component.scss']
})
export class YourDialogComponent { }

如果是库模块中的组件，则在对应的NgModule的imports中添加：

@NgModule({
  declarations: [YourDialogComponent],
  imports: [
    CommonModule,
    MatDialogModule,
    MatDialogTitleModule,
    MatDialogContentModule,
    MatDialogActionsModule
  ],
  exports: [YourDialogComponent]
})
export class YourDialogModule { }

额外检查点 #

1. 确保库项目与主项目的@angular/material版本完全一致，版本差异也可能导致样式变量异常。
2. 确认主题样式已正确加载：无论是在主项目还是库项目中，要确保导入了Angular Material的预构建主题（比如在styles文件中导入@angular/material/prebuilt-themes/indigo-pink.css）。

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