如何自定义Angular Material日期范围选择器输入框的宽高

要让日期范围选择器的输入框高度和左侧35px的按钮一致，需要针对性覆盖Angular Material组件的默认样式，以下是具体实现方案：

修改后的CSS代码 #

.no-bottom {
  margin-bottom: -1.25em !important;
}

/* 穿透组件样式隔离，调整日期选择器整体高度 */
:host ::ng-deep mat-form-field {
  height: 35px;
  min-height: 35px;
}

/* 调整输入容器高度，适配35px */
:host ::ng-deep .mat-mdc-form-field-infix {
  height: 35px;
  padding: 0;
  border-top: 0;
}

/* 调整日期范围输入框的高度与垂直对齐 */
:host ::ng-deep mat-date-range-input {
  height: 100%;
  display: flex;
  align-items: center;
}

/* 调整输入框本身的内边距和行高 */
:host ::ng-deep mat-date-range-input input {
  padding: 0 8px;
  line-height: 35px;
}

/* 调整日期选择器切换按钮的高度，确保对齐 */
:host ::ng-deep .mat-mdc-datepicker-toggle {
  height: 35px;
  display: flex;
  align-items: center;
}

/* 调整outline样式的表单边框高度（如果使用outline外观） */
:host ::ng-deep .mat-mdc-form-field-outline {
  height: 35px;
}

关键说明 #

• 使用:host ::ng-deep穿透Angular的视图封装，确保样式能作用到Material组件内部元素（Angular 12+推荐此方式，低版本可直接用::ng-deep）
• 统一设置核心元素高度为35px，通过display: flex和align-items: center确保内容垂直居中
• 移除默认内边距和边框顶部间距，避免额外高度占用

组件代码与HTML无需额外修改 #

你现有的HTML和TypeScript代码保持不变即可，上述CSS调整已能实现高度匹配的效果。

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