StackBlitz中引入@angular/material@12后样式未正常生效如何解决

你需要检查并补充以下配置即可解决样式不生效问题：

• 引入Material预构建主题
  Angular Material的组件外观完全依赖主题样式，未引入主题时组件无默认样式，可任选以下一种方式引入：
  1. 在全局src/styles.css头部添加导入语句：

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

  2. 在angular.json配置文件的样式引入数组中添加主题路径：

  {
    "projects": {
      "你的项目名": {
        "architect": {
          "build": {
            "options": {
              "styles": [
                "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                "src/styles.css"
              ]
            }
          }
        }
      }
    }
  }
  

• 导入动画依赖模块
  Material组件的状态样式、交互动效都依赖Angular动画模块，需要在src/app/app.module.ts中注册：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      // 注册动画模块
      BrowserAnimationsModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 按需注册用到的Material组件模块
  Angular Material采用模块化按需加载设计，仅安装依赖包不会自动引入所有组件，用到对应组件需要导入对应模块，例如使用Material按钮需要导入MatButtonModule：

  import { MatButtonModule } from '@angular/material/button';
  
  @NgModule({
    imports: [
      // 其他模块
      MatButtonModule
    ]
  })
  

• 添加全局Material基础样式容器
  可在根组件app.component.html最外层添加全局样式容器，保证背景、字体等全局基础样式生效：

  <div class="mat-app-background">
    <!-- 原有页面内容 -->
  </div>
  

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