Angular中Mat-Form-Field未在Mat-Toolbar居中，无法显示下边框

1. 修复表单在工具栏中的垂直居中问题 #

.researchForm里的padding-top: 2%是导致表单下移的核心原因，height: 95%也属于冗余设置，直接移除这两个属性即可。另外，align-self: center和align-items: center无需保留——父容器.toolbar已经设置了align-items: center，子元素会自动继承垂直居中的布局。

修改后的.researchForm样式：

.researchForm{
  text-size-adjust: auto;
  width: 500px;
  border-radius: 50% 50% 50% 50%!important;
}

.toolbar的现有布局属性可以保留，justify-content: space-around会让标题和表单在工具栏内均匀分布，配合align-items: center实现整体垂直居中。

2. 显示表单的下边框 #

mat-form-field的默认下边框可能被自定义样式或圆角设置覆盖，可通过以下两种方式解决：

方式一：启用Material标准外观 #

给mat-form-field添加appearance="standard"属性，直接调用组件默认的下边框样式：

<mat-form-field class="researchForm" appearance="standard">
    <input matNativeControl placeholder="搜索">
</mat-form-field>

方式二：自定义下边框样式 #

如果需要自定义边框样式，可直接针对组件内部元素设置：

.researchForm .mat-form-field-underline {
  display: block;
  border-bottom: 2px solid #ffffff; /* 匹配工具栏文字的白色边框 */
}

如果圆角设置导致下边框被裁剪，可给内部容器同步设置圆角：

.researchForm .mat-form-field-infix {
  border-radius: 25px; /* 和外层50%圆角匹配，避免边框截断 */
}

最终代码示例 #

HTML #

<mat-toolbar class="toolbar" color="primary">
  <span>E-commerce</span>
  <mat-form-field class="researchForm" appearance="standard">
      <input matNativeControl placeholder="搜索">
  </mat-form-field>
</mat-toolbar>

CSS #

.toolbar {
  background:#303030;
  color: #ffffff;
  justify-content: space-around;
  align-items: center;
}
.researchForm{
  text-size-adjust: auto;
  width: 500px;
  border-radius: 50%!important;
}
.researchForm .mat-form-field-underline {
  border-bottom-color: #ffffff;
}

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