如何修改mat-mdc-form-field（appearance="outline"）的背景色？

针对Outline样式的mat-mdc-form-field，无法直接复用Filled样式的背景色修改方案，因为两者的DOM结构和CSS类完全不同。以下是可行的CSS修改方案：

基础背景色设置（默认状态） #

在全局样式文件（如styles.scss）或使用ViewEncapsulation.None的组件样式中添加：

/* 默认状态下的背景色 */
.mat-mdc-form-field-outline-type .mdc-text-field--outlined {
  background-color: #f8f9fa; /* 替换为你需要的颜色值 */
  border-radius: 4px; /* 匹配Outline样式的默认圆角，可选 */
}

聚焦/悬浮状态的背景色 #

如果需要区分不同交互状态的背景色，添加以下样式：

/* 悬浮状态 */
.mat-mdc-form-field-outline-type .mdc-text-field--outlined.mdc-text-field--hovered {
  background-color: #e9ecef;
}

/* 聚焦状态 */
.mat-mdc-form-field-outline-type .mdc-text-field--outlined.mdc-text-field--focused {
  background-color: #e3f2fd;
}

关键说明 #

• Outline样式的表单字段依赖mdc-text-field--outlined类作为容器，而非Filled样式的mat-mdc-form-field-fill类，这是两者的核心区别。
• 必须确保样式能穿透Angular的组件封装，推荐在全局样式文件中编写，或在组件中设置encapsulation: ViewEncapsulation.None。

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