Angular Material Form Input样式错乱，复制官网代码仍异常

安全阿岳

2026-7-31

解决Angular Material表单输入框样式错乱问题

可能的原因及修复方案

1. 检查版本兼容性

Angular与Angular Material版本不匹配是样式异常的常见诱因，执行命令确认版本：

ng version

确保两者版本严格对应（如Angular 17需搭配Material 17），版本差异过大直接导致渲染异常。若不匹配，执行更新命令：

ng update @angular/material @angular/core

2. 确认全局样式导入完整

在styles.scss（或styles.css）中必须导入Material核心样式与主题，示例代码如下：

@use '@angular/material' as mat;

@include mat.core();
@include mat.all-component-themes(mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  )
)));

旧版本可使用预构建主题导入：

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

3. 验证组件模块导入

确保组件所在模块已导入MatFormFieldModule和MatInputModule：

import { NgModule } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatFormFieldModule,
    MatInputModule
  ]
})
export class YourComponentModule { }

遗漏模块会导致Material组件无法加载默认样式。