如何正确覆盖Angular Material禁用输入框的样式？

【默认效果】

可参考Angular Material的输入框组件示例

我通过以下CSS实现了需求，但这种方式是否合规？看起来我修改了Angular Material的内部样式，有没有更好的方法？

// override material design input field styling for readonly mode
.mat-form-field-disabled .mat-form-field-underline {
  height: 0;
}
.mat-input-element:disabled {
  color: $header-text-color;
}

首先得说，你的这个实现确实能达到预期效果，但确实存在不小的隐患——直接依赖Angular Material的内部类名，万一后续组件更新时这些类名被调整，你的样式就会直接失效。给你分享几种更稳妥、符合官方规范的方案：

方案1：使用官方主题定制API（首推） #

Angular Material本身就提供了主题定制的机制，咱们可以通过修改输入框相关的主题变量来全局调整禁用状态的样式，这完全符合官方规范，也不用担心版本更新导致样式断裂：

// 在你的全局主题文件中添加如下配置
$custom-input-theme: mat-input-theme($your-app-theme, (
  disabled-underline-color: transparent, // 隐藏禁用状态的下划线
  disabled-text-color: $header-text-color // 设置禁用文本颜色
));

// 将定制的输入框主题混入到全局样式中
@include mat-input-theme($custom-input-theme);

这种方式是官方推荐的最佳实践，不仅能统一全局样式，维护起来也更省心。

方案2：使用::ng-deep做局部样式穿透（应急用，不推荐长期依赖） #

如果只是需要在某个特定组件内修改样式，可以用::ng-deep配合:host来限定样式范围，避免全局污染：

:host ::ng-deep .mat-form-field-disabled .mat-form-field-underline {
  height: 0;
}
:host ::ng-deep .mat-input-element:disabled {
  color: $header-text-color;
}

不过要注意，::ng-deep已经被标记为过时特性，未来Angular可能会移除它，所以尽量少用这种方式。

方案3：封装自定义输入组件 #

如果上面两种方式都不适合你的场景，你可以自己封装一个基于Angular Material Input的组件，在内部定义你需要的禁用状态样式，这样能完全控制样式逻辑，同时避免直接操作官方组件的内部结构。

总的来说，优先选方案1的主题定制，这是最贴合Material Design规范和Angular Material设计理念的方式。你当前的实现虽然能生效，但长期来看维护成本会更高，毕竟内部类名不属于官方对外承诺的稳定API。

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