为Material Datepicker添加按钮并设置样式以实现无缝适配

我想给Material Datepicker加两个按钮，不用打开面板就能切换前一天和后一天。折腾了几个小时后做出了当前效果，但样式不够理想——日期选择器的左右上角没有圆角，和右侧按钮的过渡特别生硬。我试过把日期选择器的border-radius设为0，没用；也试过用同背景色的div遮挡，虽然能解决但明显不是正确做法。搜了谷歌和相关平台也没找到解决方案，附上当前的代码：

当前HTML代码 #

<div class="date-picker-container">
  <button class="date-picker-button-left" mat-mini-fab (click)="previousDay()">
    <mat-icon>chevron_left</mat-icon>
  </button>
  <mat-form-field [formGroup]="dateForm" class="date-picker-field">
    <mat-label>Choose a date</mat-label>
    <input
      matInput
      [matDatepicker]="picker"
      formControlName="date"
      (dateInput)="selectDate($event)"
    />
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <button class="date-picker-button-right" mat-mini-fab (click)="nextDay()">
    <mat-icon>chevron_right</mat-icon>
  </button>
</div>

当前SCSS代码 #

.date-picker-container {
  display: flex;
  align-items: flex-start;
}

.date-picker-button-left {
  height: 55px;
  border-radius: 12px 0 0 12px !important;
  background-color: #3f4948;
  color: white;
}

.date-picker-button-right {
  height: 55px;
  border-radius: 0 12px 12px 0 !important;
  background-color: #3f4948;
  color: white;
}

解决方案 #

问题核心是Material的mat-form-field通过内置的.mat-form-field-outline等元素控制边框样式，直接设置date-picker-field的border-radius无法覆盖默认样式。需要针对这些内置元素调整，同时优化容器布局：

修改后的SCSS代码

.date-picker-container {
  display: flex;
  align-items: center; /* 改为垂直居中对齐，避免元素错位 */
}

.date-picker-button-left {
  height: 55px;
  border-radius: 12px 0 0 12px;
  background-color: #3f4948;
  color: white;
  margin-right: -1px; /* 消除按钮与输入框的边框间隙 */
}

.date-picker-button-right {
  height: 55px;
  border-radius: 0 12px 12px 0;
  background-color: #3f4948;
  color: white;
  margin-left: -1px; /* 消除按钮与输入框的边框间隙 */
}

.date-picker-field {
  margin: 0; /* 去掉mat-form-field默认外边距 */
  height: 55px; /* 和按钮高度统一 */
}

/* 覆盖mat-form-field的左侧边框圆角 */
.date-picker-field .mat-form-field-outline-start {
  border-radius: 0 !important;
}

/* 覆盖mat-form-field的右侧边框圆角 */
.date-picker-field .mat-form-field-outline-end {
  border-radius: 0 !important;
}

/* 聚焦状态下的边框也要同步修改 */
.date-picker-field.mat-focused .mat-form-field-outline-start {
  border-radius: 0 !important;
}

.date-picker-field.mat-focused .mat-form-field-outline-end {
  border-radius: 0 !important;
}

/* 调整输入框内边距，避免内容被边框遮挡 */
.date-picker-field .mat-input-element {
  padding: 0 16px;
}

关键调整说明

• align-items: center：确保按钮和输入框垂直居中对齐，解决视觉错位问题。
• margin: -1px：抵消按钮与mat-form-field之间的默认边框间隙，让两者完全贴合。
• 针对.mat-form-field-outline-start/end修改border-radius：直接覆盖Material的默认边框圆角，让输入框左右无圆角，与按钮的圆角形成完整的圆角组合。
• 统一元素高度：保证按钮和输入框高度一致，视觉更协调。

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