如何自定义Angular Material表单字段背景色与顶部圆角样式

你提到的mat-mdc-form-field-focus-overlay是聚焦时的高亮覆盖层，并非控制表单背景的核心元素，修改它无法实现目标效果；而mat-form-field-infix是输入区域的内部容器，也不是整个表单字段的背景容器，这就是你设置红色背景能生效但做不出官方示例效果的原因。

直接用以下CSS代码就能实现和官方示例一致的浅灰背景+顶部圆角效果：

全局样式方案（推荐） #

在项目的全局样式文件（比如styles.scss）中添加：

.mat-mdc-form-field {
  /* 浅灰色背景，匹配官方示例色调 */
  --mdc-text-field-container-color: #f5f5f5;
  /* 顶部两个角设为4px圆角，底部保持直角 */
  --mdc-text-field-container-shape: 4px 4px 0 0;
}

/* 确保聚焦状态下背景和圆角保持一致 */
.mat-mdc-form-field.mat-focused .mdc-text-field__container {
  background-color: #f5f5f5 !important;
  border-radius: 4px 4px 0 0 !important;
}

组件内样式方案（需处理样式隔离） #

如果要在单个组件的样式文件中生效，需要使用::ng-deep穿透样式隔离：

::ng-deep .mat-mdc-form-field {
  --mdc-text-field-container-color: #f5f5f5;
  --mdc-text-field-container-shape: 4px 4px 0 0;
}

::ng-deep .mat-mdc-form-field.mat-focused .mdc-text-field__container {
  background-color: #f5f5f5 !important;
  border-radius: 4px 4px 0 0 !important;
}

关键说明 #

• 官方示例的背景是作用在mdc-text-field__container容器上的，通过Material提供的CSS变量--mdc-text-field-container-color可直接控制背景色，--mdc-text-field-container-shape控制圆角形状，这种方式比硬写类名更贴合Angular Material的设计逻辑。
• 如果样式仍不生效，检查自定义CSS文件的加载顺序是否在Angular Material样式之后，确保能覆盖默认样式。

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