Mat Button Toggle Group组件显示异常，请求协助排查问题

你当前使用的Mat Button Toggle Group代码如下：

<mat-button-toggle-group appearance="legacy" name="fontStyle" aria-label="Font Style">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

显示异常效果：

以下是几个常见的排查方向，你可以逐一验证：

• 确认Material组件模块已正确导入
  确保在你的功能模块或根模块（AppModule）中导入了MatButtonToggleModule，示例代码：

  import { MatButtonToggleModule } from '@angular/material/button-toggle';
  
  @NgModule({
    imports: [
      // ...其他导入模块
      MatButtonToggleModule
    ]
  })
  export class YourModule { }
  

• 检查Material样式是否正确引入
  Angular Material组件依赖专属样式，你需要在项目中引入预构建主题或自定义主题：

  • 若使用angular.json配置，在styles数组中添加：

    "styles": [
      "@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.scss"
    ]
    

  • 若使用SCSS自定义主题，确保在styles.scss中正确导入Material的基础样式和主题配置。

• 验证Angular与Material版本兼容性
  Angular和Angular Material的版本必须严格匹配，版本不兼容会导致样式渲染异常。你可以通过终端执行ng version查看当前版本，然后对照Angular Material官网的版本对应表确认是否匹配。

• 检查动画模块是否初始化
  Material组件依赖动画模块，Angular 14+版本需要在main.ts中提供动画服务：

  import { provideAnimations } from '@angular/platform-browser/animations';
  
  bootstrapApplication(AppComponent, {
    providers: [provideAnimations()]
  });
  

  旧版本则需要在AppModule中导入BrowserAnimationsModule或NoopAnimationsModule。

• 排查样式冲突问题
  项目中的全局样式、第三方UI库样式可能覆盖了Material组件的默认样式。你可以打开浏览器开发者工具，查看异常元素的样式规则，确认是否有自定义样式优先级过高的情况；也可以临时在组件样式中使用::ng-deep强制应用Material样式（注意该特性的使用规范）。

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