能否通过CSS设置Angular mat-form-field外观，无需默认配置区分状态？

首先明确：无法通过CSS直接修改mat-form-field的appearance输入属性——这个属性是组件内部的逻辑控制项，CSS只能操作DOM样式，不能改变组件的输入值。不过可以通过两种可靠的方式实现你的需求：

方式一：动态绑定appearance属性（推荐） #

直接在模板中根据表单字段的禁用状态，动态切换appearance的值，这是最符合Angular组件设计的方案，能完整保留原生两种外观的所有样式和交互。

响应式表单示例 #

<mat-form-field [appearance]="userForm.get('username')?.disabled ? 'fill' : 'outline'">
  <mat-label>用户名</mat-label>
  <input matInput formControlName="username">
</mat-form-field>

模板驱动表单示例 #

<mat-form-field [appearance]="usernameInput.disabled ? 'fill' : 'outline'">
  <mat-label>用户名</mat-label>
  <input matInput #usernameInput [disabled]="isUsernameDisabled">
</mat-form-field>

如果需要批量处理多个字段，可以封装成指令减少重复代码：

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

@Directive({
  selector: '[appDynamicAppearance]'
})
export class DynamicAppearanceDirective {
  @HostBinding('appearance') get appearance(): string {
    return this.ngControl.control?.disabled ? 'fill' : 'outline';
  }

  constructor(private ngControl: NgControl) {}
}

模板中直接使用指令即可：

<mat-form-field appDynamicAppearance>
  <mat-label>用户名</mat-label>
  <input matInput formControlName="username">
</mat-form-field>

方式二：CSS模拟外观（不推荐，仅作备选） #

如果不想修改模板，可以通过CSS模拟两种外观的差异，但这种方式需要覆盖大量Angular Material的内置样式，且不同版本可能存在样式类名变化的兼容性问题，无法完全还原原生交互细节。

示例CSS代码：

/* 禁用状态下隐藏outline边框，添加fill的背景 */
mat-form-field[disabled] .mat-form-field-outline {
  display: none;
}

mat-form-field[disabled] .mat-form-field-flex {
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 0.75em;
}

/* 调整禁用状态下的标签位置，模拟fill外观的标签偏移 */
mat-form-field[disabled] .mat-form-field-label-wrapper {
  top: -1.25em;
}

mat-form-field[disabled].mat-form-field-should-float .mat-form-field-label {
  transform: translateY(-1.25em) scale(0.75);
}

内容的提问来源于stack exchange，提问作者Onalenna Junior Makhura