自定义Mat-Form-Field样式：去除灰色区域与输入框边框

要移除mat-form-field的灰色背景区域和输入框边框，需要覆盖Angular Material组件的默认封装样式，以下是具体实现：

1. 组件内样式修改（使用::ng-deep穿透封装） #

在你的组件CSS文件中添加以下样式：

/* 去掉mat-form-field底部多余内边距 */
::ng-deep .search-bar .mat-form-field-wrapper {
  padding-bottom: 0;
}

/* 将整个输入区域背景设为白色，覆盖默认灰色 */
::ng-deep .search-bar .mat-form-field-flex {
  background-color: white;
  border: none;
}

/* 隐藏mat-form-field默认的outline边框（包括聚焦状态） */
::ng-deep .search-bar .mat-form-field-outline,
::ng-deep .search-bar .mat-form-field-focused .mat-form-field-outline-thick {
  display: none;
}

/* 隐藏mat-form-field默认的下划线 */
::ng-deep .search-bar .mat-form-field-underline {
  display: none;
}

/* 去掉输入框自身的边框、聚焦阴影 */
.search-bar-container input.form-control {
  border: none;
  outline: none;
  box-shadow: none;
  flex: 1; /* 让输入框占满flex容器剩余空间 */
}

/* 调整按钮内边距，避免布局拥挤 */
.search-bar-container button.mat-icon-button {
  padding: 0 8px;
}

2. 可选：全局样式修改（避免使用::ng-deep） #

如果不想用::ng-deep，可以在项目根目录的styles.css中添加上述样式（去掉::ng-deep前缀）：

.search-bar .mat-form-field-wrapper {
  padding-bottom: 0;
}

.search-bar .mat-form-field-flex {
  background-color: white;
  border: none;
}

.search-bar .mat-form-field-outline,
.search-bar .mat-form-field-focused .mat-form-field-outline-thick {
  display: none;
}

.search-bar .mat-form-field-underline {
  display: none;
}

.search-bar-container input.form-control {
  border: none;
  outline: none;
  box-shadow: none;
  flex: 1;
}

.search-bar-container button.mat-icon-button {
  padding: 0 8px;
}

3. 模板结构优化（可选） #

给mat-form-field添加appearance="none"属性，减少默认样式干扰：

<mat-form-field style="width: 400px;" class="search-bar" appearance="none">
  <!-- 原有内容 -->
</mat-form-field>

这样设置后，就能完全实现纯白无框的搜索栏效果。

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