向材质日期选择器添加按钮并设置样式以无缝适应

Question

我想向我的日期选择器添加按钮，以便在不打开日期选择器的情况下转到前一天和后一天。几个小时后我得到了这个结果： 带有按钮的日期选择器的当前状态 没那么糟糕，但也并不完美。

日期选择器的两个上角都不是圆角的，尤其是到右侧按钮的过渡不好，但我什至不知道为什么会这样。

我尝试将日期选择器的边框半径设置为 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;
}

Answer 1

日期选择器包裹在

mat-form-field

中，其左上角和右上角有一个边框半径。这也可以在 docs 中重现。只需使用 CSS 将其删除即可。

.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper {
  border-radius: 0;
}

注意：当使用模拟视图封装时，这里需要

::ng-deep

，因为需要覆盖内部Material组件的样式。