如何自定义mat-form-field的背景颜色？修改默认灰白背景

你可以通过CSS样式覆盖Angular Material mat-form-field的默认背景色，以下是两种常用实现方式：

全局样式修改（全项目生效） #

在项目全局样式文件（通常为styles.scss或styles.css）中添加代码，统一修改所有mat-form-field的背景：

/* 设置基础背景色 */
.mat-mdc-form-field {
  background-color: #f5f5f5; /* 烟白色，可替换为任意灰色系颜色值 */
  border-radius: 4px; /* 可选：让背景边角更圆润 */
  padding: 2px 8px; /* 可选：避免输入框紧贴背景边缘 */
}

/* 保持聚焦状态下的背景色（可选） */
.mat-mdc-form-field.mat-focused {
  background-color: #f5f5f5;
}

/* 禁用状态下的背景色（可选） */
.mat-mdc-form-field:disabled {
  background-color: #e0e0e0;
}

组件内局部修改（仅当前组件生效） #

若只需修改单个组件内的mat-form-field，可在组件样式文件中使用:host ::ng-deep穿透Angular的样式封装：

:host ::ng-deep .mat-mdc-form-field {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 2px 8px;
}

注意事项 #

• 颜色值可根据需求替换为十六进制、RGB/RGBA或CSS命名色（如lightgray）
• 若使用Angular Material自定义主题，也可通过主题配置变量统一设置，但直接编写CSS样式是更快捷的解决方案

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