Angular Material预构建主题异常：输入框默认无边框问题求助

项目环境信息 #

package.json依赖 #

"dependencies": {
  "@angular/animations": "^15.0.0",
  "@angular/cdk": "^15.1.3",
  "@angular/common": "^15.0.0",
  "@angular/compiler": "^15.0.0",
  "@angular/core": "^15.0.0",
  "@angular/forms": "^15.0.0",
  "@angular/material": "^15.1.3",
  "@angular/platform-browser": "^15.0.0",
  "@angular/platform-browser-dynamic": "^15.0.0",
  "@angular/router": "^15.0.0",
  "bootstrap": "^5.2.3",
  "rxjs": "~7.5.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.12.0"
}

组件HTML代码 #

<mat-form-field>
    <mat-label>First Name</mat-label>
    <input type="text" matInput formControlName="firstName" [errorStateMatcher]="matcher" placeholder="First Name">

    <mat-error *ngIf="profileForm.controls['firstName'].errors?.required && profileForm.controls['firstName'].errors?.touched">
        First Name is <strong>required</strong>
    </mat-error>
</mat-form-field>

AppModule配置 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TemplateDrivenComponent } from './template-driven/template-driven.component';
import { ReactiveComponent } from './reactive/reactive.component';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CdkAccordionModule } from '@angular/cdk/accordion';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button'

@NgModule({
  declarations: [
    AppComponent,
    TemplateDrivenComponent,
    ReactiveComponent
  ],
  exports: [],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    CdkAccordionModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
  ],
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular.json样式配置 #

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.scss",
  "node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css"
]

问题现象 #

应用加载后，Material输入框默认无明显边框，几乎无法识别；仅当输入框获得焦点时，边框才会显示。预期输入框默认显示边框（符合Material主题的默认行为）。

解决步骤 #

1. 统一Angular与Material版本
   当前@angular/core为15.0.0，@angular/material和@angular/cdk为15.1.3，版本不一致可能导致样式异常。修改package.json中的依赖版本：

   "@angular/cdk": "^15.0.0",
   "@angular/material": "^15.0.0"
   

   执行npm install重新安装依赖，确保核心库与Material版本匹配。

2. 确认样式加载优先级
   保持angular.json中Material主题样式在最后加载，确保其样式不会被前面的Bootstrap或自定义样式覆盖（当前配置已符合要求，可无需调整）。

3. 排查自定义样式冲突
   检查src/styles.scss或其他全局样式文件中，是否存在覆盖mat-form-field-outline、mat-input-element等类的样式（如border: none、outline: none）。如果有，移除或调整这些样式规则。

4. 显式指定form-field外观
   虽然已全局配置appearance: 'outline'，可尝试在单个mat-form-field上显式声明，验证全局配置是否生效：

   <mat-form-field appearance="outline">
       <!-- 原有输入框内容 -->
   </mat-form-field>
   

5. 清理构建缓存
   执行ng build --delete-output-path清理旧的构建文件，再通过ng serve重启项目，避免缓存导致样式未更新。

内容的提问来源于stack exchange，提问作者Jacob Nelson