Angular MatDialog样式未生效及按钮无高亮问题求助

• 确认主题样式已正确引入
  Angular Material组件依赖主题样式才能正常渲染，需在全局样式文件（如styles.scss或styles.css）中添加主题配置：
  SCSS方式：

  @use '@angular/material' as mat;
  
  @include mat.core();
  $app-primary: mat.define-palette(mat.$indigo-palette);
  $app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
  $app-warn: mat.define-palette(mat.$red-palette);
  
  $app-theme: mat.define-light-theme((
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    )
  ));
  
  @include mat.all-component-themes($app-theme);
  

  CSS方式（直接使用预构建主题）：

  @import '@angular/material/prebuilt-themes/indigo-pink.css';
  

• 检查Dialog相关模块是否导入
  在使用对话框的业务模块中，必须导入MatDialogModule和MatButtonModule：

  import { MatDialogModule } from '@angular/material/dialog';
  import { MatButtonModule } from '@angular/material/button';
  
  @NgModule({
    imports: [
      // 其他业务模块
      MatDialogModule,
      MatButtonModule
    ]
  })
  export class YourFeatureModule { }
  

• 修复按钮焦点高亮问题
  cdkFocusInitial依赖CDK的无障碍模块，需在模块中导入A11yModule：

  import { A11yModule } from '@angular/cdk/a11y';
  
  @NgModule({
    imports: [
      // 其他模块
      A11yModule
    ]
  })
  export class YourFeatureModule { }
  

  同时排查全局样式是否存在outline: none这类覆盖Material焦点样式的规则，若有需调整或移除。

• 排查样式隔离冲突
  若对话框组件启用了ViewEncapsulation.None，或自定义样式中覆盖了.mat-dialog-container、.mat-button等Material默认类，会导致样式异常，需移除或修改这类自定义样式。

• 验证版本兼容性
  Angular Material 15.2.0要求配套Angular核心包（@angular/core、@angular/common等）版本为15.x，检查package.json确保版本匹配，版本不兼容会引发样式和功能异常。

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