AngularJS/Angular 12混合应用中mat-form-field的matInput默认样式不生效

修复方案 #

1. 补全Angular Material主题导入 #

90%以上的无报错Material样式缺失问题，都是因为没有导入全局主题样式。你需要在全局样式入口（通常为src/styles.css/src/styles.scss）中引入官方预置主题，示例如下：

/* 四选一即可，可根据设计需求选择对应风格的主题 */
@import "@angular/material/prebuilt-themes/indigo-pink.css";
/* 其他可选主题：deeppurple-amber.css、purple-green.css、pink-bluegrey.css */

如果使用Angular CLI构建，也可以直接在angular.json的build.options.styles数组中添加主题路径，保证全局生效：

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

注意：降级到AngularJS中渲染的Angular组件，必须依赖全局生效的样式，不要把主题导入到组件私有样式中。

2. 排查AngularJS全局样式冲突 #

混合应用场景下，AngularJS侧定义的全局表单、输入框样式很容易覆盖Angular Material的内置样式，你可以临时注释掉AngularJS侧所有和输入框、表单相关的全局样式，验证样式是否正常渲染。如果确认是冲突导致，可以给Material组件外层增加专属的命名空间类，调整样式优先级避免覆盖。

3. 全局配置mat-form-field默认外观 #

Angular 12对应的Material版本中，mat-form-field的默认外观为fill，你可以在根模块中显式声明默认值，避免部分场景下外观规则不生效：
首先在AppModule中导入配置令牌：

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

然后在@NgModule的providers数组中添加配置项：

@NgModule({
  // 其他配置保持不变
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } }
  ]
})

4. 验证组件视图封装配置 #

检查UserProfileComponent的@Component配置，确认没有手动设置ViewEncapsulation.None，错误的视图封装配置也会导致组件样式不生效。

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