Angular 16中mat-form-field样式修改及底部空格问题求助

1. 移除边框并调整背景色 #

Angular Material组件样式有封装隔离，需用::ng-deep穿透样式层覆盖默认样式，在组件CSS文件中添加以下代码：

/* 设置mat-form-field容器背景色 */
:host ::ng-deep .mat-mdc-form-field {
  --mdc-outlined-text-field-container-color: #f5f5f5; /* 替换为你需要的背景色 */
}

/* 移除容器边框 */
:host ::ng-deep .mat-mdc-form-field-outline {
  display: none;
}

/* 让输入框背景透明，继承容器背景色 */
:host ::ng-deep .mat-mdc-input-element {
  background-color: transparent;
}

2. 消除底部多余空格 #

底部空格多来自辅助文本容器的默认占位空间或组件外边距，添加以下代码解决：

/* 移除辅助文本/错误提示容器（无内容时仍占空间） */
:host ::ng-deep .mat-mdc-form-field-subscript-wrapper {
  display: none;
}

/* 移除组件本身的底部外边距 */
.mat-form-field {
  margin-bottom: 0;
}

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