如何自定义@angular-material-components/datetime-picker日期选择器的宽度

方案1：全局样式限定自定义类（推荐，无兼容性问题） #

1. 先给你的mat-form-field添加自定义类，避免全局样式污染其他表单组件，同时提升选择器优先级：

<mat-form-field class="custom-date-picker">
    <input matInput [ngxMatDatetimePicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <!-- 若需要调整弹出日历面板尺寸，新增panelClass属性 -->
    <ngx-mat-datetime-picker #picker hideTime="true" panelClass="custom-date-panel">
    </ngx-mat-datetime-picker>
</mat-form-field>

2. 在全局styles.scss中添加对应样式：

/* 调整输入框高亮区域尺寸 */
.custom-date-picker .mat-form-field-wrapper {
  width: 150px !important;
  padding-bottom: 0 !important; /* 移除默认底部内边距缩小整体高度 */
}
.custom-date-picker input {
  height: 36px !important;
}

/* 可选：缩小弹出的日历面板尺寸 */
.custom-date-panel {
  width: 240px !important;
}
.custom-date-panel .mat-calendar {
  width: 100% !important;
  padding: 4px !important;
}
.custom-date-panel .mat-calendar-body-cell {
  width: 28px !important;
  height: 28px !important;
}

方案2：组件内样式穿透 #

如果不想把样式写到全局文件，可在组件的样式文件中使用::ng-deep穿透Angular视图封装，配合:host限制作用域仅在当前组件：

:host ::ng-deep .custom-date-picker .mat-form-field-wrapper {
  width: 150px !important;
  padding-bottom: 0 !important;
}
:host ::ng-deep .custom-date-picker input {
  height: 36px !important;
}

原样式不生效的核心原因 #

• Angular 默认开启视图封装，组件内写的样式默认只能作用于当前组件的模板元素，无法命中 Angular Material 内部生成的元素
• 未加自定义类前缀的全局样式优先级低于 Angular Material 自带的组件样式，会被默认规则覆盖

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