Angular 12中mat-form-field超出search-bar边界，如何调整其高度？

核心原因 #

你使用appearance="fill"的mat-form-field默认自带了上下内边距、底部占位间距，以及输入框区域顶部的透明边框（用来预留浮动标签位置），这些内置样式叠加后的总高度超过了搜索栏的可用容纳高度，因此出现溢出。

调整方案 #

按照以下步骤修改代码即可：

1. 修正冲突样式与基础布局

首先调整搜索栏和表单的基础样式，解决属性冲突、垂直对齐问题：

.search-bar{
    background-color: #ffffff;
    /* 固定总高度的话添加box-sizing，避免padding撑开高度 */
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px; /* 高度的一半适配圆角效果 */
    display: flex;
    align-items: center; /* 内部元素垂直居中 */
    padding: 0 15px; /* 左右内边距即可，不需要上下padding避免挤压内容 */
    min-width: fit-content;
    width: max-content;
    gap: 10px; /* 搜索图标和输入框之间的间距 */
}
.example-form{
    background: #ffffff;
    outline: none;
    border-style: none;
    width: 30rem; /* 删除重复声明的width: max-content，避免宽度设置冲突 */
    font-size: 1.2rem;
}

2. 覆盖mat-form-field的内置高度样式

如果是在组件内写样式，使用::ng-deep穿透组件样式封装，调整内置间距：

/* 让表单元素占满表单宽度 */
::ng-deep .example-full-width {
  width: 100% !important;
}
/* 去掉mat-form-field默认的底部预留间距 */
::ng-deep .example-full-width .mat-form-field-wrapper {
  padding-bottom: 0 !important;
}
/* 调整输入框区域的上下内边距 */
::ng-deep .example-full-width.mat-form-field-appearance-fill .mat-form-field-flex {
  padding: 0.3em 0.75em !important;
  background: #fff; /* 与搜索栏背景保持一致 */
}
/* 去掉为浮动标签预留的顶部透明边框占位 */
::ng-deep .example-full-width .mat-form-field-infix {
  padding: 0.2em 0 !important;
  border-top: none !important;
}
/* 可选：隐藏默认的底部下划线，更适配自定义搜索栏样式 */
::ng-deep .example-full-width .mat-form-field-underline {
  display: none !important;
}

如果不想用::ng-deep，可以把上述::ng-deep后面的样式代码直接写到项目全局的styles.css/styles.scss文件中即可生效。

适配Angular 15+ MDC版本Material

如果你使用的是Angular 15及以上版本的MDC重构版Material组件，把上述样式中的类名替换为MDC对应的类即可：

• 将.mat-form-field-wrapper替换为.mat-mdc-form-field-subscript-wrapper
• 将.mat-form-field-flex替换为.mat-mdc-text-field-wrapper
• 将.mat-form-field-infix替换为.mat-mdc-form-field-infix
• 将.mat-form-field-underline替换为.mat-mdc-form-field-bottom-align

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