Angular中如何将mat-datepicker选中及悬停日期的圆形改为方形

要将Mat-Datepicker中选中和悬停状态的日期从圆形改为方形，只需覆盖Material组件的默认CSS样式即可，具体方案如下：

方案一：全局样式修改（推荐） #

在项目根目录的styles.scss（或styles.css）文件中添加以下代码：

/* 选中日期的方形样式 */
.mat-calendar-body-selected {
  border-radius: 0 !important;
}

/* 选中日期的内容容器同步改为方形 */
.mat-calendar-body-selected .mat-calendar-body-cell-content {
  border-radius: 0 !important;
}

/* 悬停日期的方形样式（排除禁用日期） */
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content {
  border-radius: 0 !important;
}

方案二：组件内样式修改 #

如果只想在单个组件中生效，可在组件的样式文件中使用::ng-deep穿透样式封装：

:host ::ng-deep .mat-calendar-body-selected {
  border-radius: 0 !important;
}

:host ::ng-deep .mat-calendar-body-selected .mat-calendar-body-cell-content {
  border-radius: 0 !important;
}

:host ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content {
  border-radius: 0 !important;
}

说明 #

• border-radius: 0 是将默认的圆形圆角（通常为50%）改为0，实现方形效果。
• 使用!important是为了确保自定义样式优先级高于Material的默认样式，也可以通过结合组件类名等方式提升选择器优先级来替代!important。

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