Angular 17中Angular Material日期选择器样式修改求助

针对Angular 17及Angular Material 17.3.10版本，以下是两种可靠的样式定制方案，替代已废弃的::ng-deep：

方案一：全局样式 + panelClass（推荐） #

1. 在日期选择器模板中指定自定义面板类：

<!-- 基础日期选择器 -->
<mat-datepicker #picker panelClass="custom-calendar"></mat-datepicker>

<!-- 带输入框的绑定场景 -->
<mat-form-field>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker panelClass="custom-calendar"></mat-datepicker>
</mat-form-field>

2. 在全局样式文件（如styles.scss）中添加目标样式：

/* 直接覆盖日历容器样式 */
.custom-calendar .mat-calendar {
  background-color: #b91212;
  color: var(--mat-datepicker-calendar-container-text-color);
  box-shadow: var(--mat-datepicker-calendar-container-elevation-shadow);
  border-radius: var(--mat-datepicker-calendar-container-shape);
}

/* 更优雅的方式：使用Material内置CSS变量定制 */
.custom-calendar {
  --mat-datepicker-calendar-container-background-color: #b91212;
  --mat-datepicker-calendar-container-text-color: #ffffff;
  --mat-datepicker-calendar-container-elevation-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  --mat-datepicker-calendar-container-shape: 12px;
}

方案二：组件内关闭样式封装 #

如果不想污染全局样式，可以在目标组件中关闭样式封装，让组件内的样式穿透到日期选择器面板：

1. 修改组件TS文件，添加ViewEncapsulation.None：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-datepicker-component',
  templateUrl: './your-datepicker-component.component.html',
  styleUrls: ['./your-datepicker-component.component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭样式封装
})
export class YourDatepickerComponentComponent { }

2. 在组件SCSS文件中添加样式（仍需配合panelClass）：

.custom-calendar .mat-calendar {
  background-color: #b91212;
  color: var(--mat-datepicker-calendar-container-text-color);
  box-shadow: var(--mat-datepicker-calendar-container-elevation-shadow);
  border-radius: var(--mat-datepicker-calendar-container-shape);
}

为什么之前的panelClass无效？ #

日期选择器的面板是通过Angular Overlay服务渲染在根DOM节点下，不属于组件的DOM树范围，因此组件默认的Emulated样式封装无法将样式应用到面板上。通过全局样式或关闭组件样式封装，才能让样式穿透到这个独立的DOM节点。

内容的提问来源于stack exchange，提问作者Jihed Ben Zarb