Angular 14中Angular Material组件样式未正常生效问题

环境信息 #

• Angular版本：14
• 操作系统：Linux Ubuntu

排查步骤（按出现概率从高到低排序） #

• 首先检查是否正确引入Material主题
  这是90%同类问题的根因。打开根目录angular.json，找到对应项目构建配置里的styles数组，必须优先引入Material预构建主题文件，再引入自定义全局样式，示例配置：

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

  如果使用自定义主题，检查全局样式文件里是否调用了@include mat.core()，14版本漏写这行直接会导致表单组件基础样式缺失。
• 检查模块导入是否完整
  使用matInput必须同时在对应业务模块导入MatFormFieldModule、MatInputModule两个模块，根模块必须导入BrowserAnimationsModule，缺任何一个都会导致样式或交互异常，导入示例：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatFormFieldModule,
      MatInputModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 检查模板结构是否合规
  matInput指令必须直接放在<mat-form-field>标签内部使用，不能裸用，标签、占位符的位置也要符合规范，正确结构参考：

  <mat-form-field>
    <mat-label>输入项名称</mat-label>
    <input matInput placeholder="请输入内容">
  </mat-form-field>
  

• 检查版本匹配性
  执行npm ls @angular/material查看依赖版本，必须和Angular核心版本保持同一个大版本（即14.x.x），跨大版本安装会出现样式、API不兼容的问题，版本不匹配时直接执行ng add @angular/material@14重新安装对应版本即可。
• 排查全局样式冲突
  打开浏览器开发者工具，选中渲染异常的输入框组件，在Computed面板查看是否有自定义全局样式（比如直接写的input { padding: 0; border: none }这类标签选择器样式）覆盖了Material的默认样式。如果存在这类冲突，把全局标签选择器改成类名选择器，避免直接重置原生表单元素样式。

内容的提问来源于stack exchange，提问作者Wahéb