如何在NX Monorepo的Angular Material主题中设置FormField的appearance属性？

Angular Material的主题文件（SCSS）没办法直接定义组件的appearance输入属性——主题系统只管样式（颜色、排版、密度这些），而appearance是控制组件DOM结构和行为的参数，不属于样式范畴。

给你几个比包装组件更优雅的替代方案：

方案1：全局指令统一设置 #

写个Angular指令，自动给所有mat-form-field加上appearance="outline"，只在目标应用里导入这个指令就行，其他应用不用管。

代码示例：

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: 'mat-form-field'
})
export default class FormFieldOutlineDirective {
  @HostBinding('appearance') appearance = 'outline';
}

把这个指令加到目标应用的app.module.ts里，该应用内所有mat-form-field都会自动用outline外观，不用挨个改组件。

方案2：依赖注入+共享组件配置 #

如果你的共享UI库有封装的表单字段组件，可以用依赖注入搞个配置令牌，不同应用注入不同值，动态设置appearance。

1. 先在共享库里定义令牌和基础组件：

import { InjectionToken, Component, Input } from '@angular/core';
import { MatFormFieldAppearance } from '@angular/material/form-field';

export const FORM_FIELD_APPEARANCE = new InjectionToken<MatFormFieldAppearance>(
  'FORM_FIELD_APPEARANCE'
);

@Component({
  selector: 'shared-form-field',
  template: `<mat-form-field [appearance]="appearance">
               <ng-content></ng-content>
             </mat-form-field>`
})
export class SharedFormFieldComponent {
  @Input() appearance?: MatFormFieldAppearance;

  constructor(@Inject(FORM_FIELD_APPEARANCE) defaultAppearance: MatFormFieldAppearance) {
    this.appearance = this.appearance || defaultAppearance;
  }
}

2. 然后在目标应用的app.module.ts里提供配置：

import { NgModule } from '@angular/core';
import { FORM_FIELD_APPEARANCE } from '@your-workspace/shared/ui-components';

@NgModule({
  providers: [
    { provide: FORM_FIELD_APPEARANCE, useValue: 'outline' }
  ]
})
export class AppModule {}

这样该应用用shared-form-field时默认就是outline外观，其他应用可以传'fill'之类的值来保持自己的样式。

方案3：纯样式模拟（不推荐） #

要是只想视觉上凑活（不改变DOM结构），可以在主题SCSS里覆盖样式，但这不是真的设置appearance——毕竟appearance会改组件DOM结构，纯样式模拟容易和Material原生样式冲突，版本更新可能失效。应急的话可以试试：

// 目标应用的主题文件
.mat-form-field-appearance-fill {
  .mat-form-field-outline {
    opacity: 1;
  }
  .mat-form-field-flex {
    padding: 0;
    .mat-form-field-infix {
      border-top: none;
    }
  }
}

总结下：优先选方案1或方案2，比包装组件灵活，符合Angular和NX的架构逻辑，能在特定应用里全局统一设置FormField外观，不用逐个改组件。

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