我之前也碰到过这个小困扰——默认情况下Angular Material的mat-select下拉面板确实会和外层的mat-form-field宽度不一致，主要是因为下拉面板自带了默认的最小宽度、边距和偏移值。下面给你两种实用的调整方案，能让下拉框和mat-form-field完全对齐：

一、组件级样式调整（推荐，避免全局污染） #

如果只需要让某一个组件里的下拉框对齐，直接在该组件的CSS/SCSS文件中添加以下样式：

::ng-deep .mat-select-panel {
  min-width: 100% !important;
  margin-left: -1px !important;
  margin-top: 0 !important;
}

样式说明： #

• ::ng-deep：用来穿透Angular的组件样式隔离，确保样式能作用到mat-select的下拉面板上
• min-width: 100%：让下拉面板宽度完全继承父容器（也就是mat-form-field）的宽度
• margin-left: -1px：修正下拉面板默认的左侧偏移，消除和输入框之间的缝隙
• margin-top: 0：去掉默认的顶部间距，让下拉框紧贴输入框底部

如果需要更精准地控制特定的mat-form-field，可以给目标mat-form-field添加自定义类名（比如full-width-select-field），然后针对性设置样式：

.full-width-select-field ::ng-deep .mat-select-panel {
  min-width: calc(100% + 2px) !important;
  margin-left: -1px !important;
}

二、全局样式调整（适用于所有下拉框） #

如果希望项目中所有的mat-select都和对应的mat-form-field对齐，可以在全局样式文件（比如styles.scss）中添加：

.mat-select-panel {
  min-width: 100% !important;
  margin-left: -1px !important;
  margin-top: 0 !important;
}

⚠️ 注意：这种方式会影响所有mat-select组件，如果有特殊需求的下拉框，需要单独覆盖样式。

额外提醒 #

• 如果你使用的是Angular Material最新版本，虽然::ng-deep被标记为deprecated，但目前在实际项目中依然是最便捷的穿透样式隔离的方式；如果不想用它，也可以给组件设置viewEncapsulation.None，不过这样会让组件样式全局生效，需要谨慎使用。
• 调整后记得在不同屏幕尺寸下测试，确保响应式场景下依然能保持对齐。

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