如何用SCSS修改PrimeNG Calendar弹出式日期时间选择器尺寸？

你之前的代码未生效，核心问题是弹出式选择器的DOM结构独立于p-calendar输入框组件，且PrimeNG组件的内部样式默认被封装，需要通过样式穿透来覆盖。以下是正确的SCSS写法：

基础调整方案（Angular项目） #

针对Angular的样式封装机制，使用:host ::ng-deep穿透到组件内部，直接修改弹出面板的尺寸：

/* 控制弹出选择器的整体宽高 */
:host ::ng-deep .p-calendar-panel {
  width: 320px;  /* 自定义宽度 */
  height: 380px; /* 自定义高度 */
}

/* 单独调整日期选择区域的高度 */
:host ::ng-deep .p-datepicker {
  height: 280px;
}

/* 单独调整时间选择区域的高度 */
:host ::ng-deep .p-timepicker {
  height: 80px;
}

限定作用范围（避免全局影响） #

如果只想让样式作用到你当前的.date-time-picker容器下的Calendar组件，可结合自定义类缩小作用范围：

.date-time-picker ::ng-deep .p-calendar-panel {
  width: 320px;
  height: 380px;
}

.date-time-picker ::ng-deep .p-datepicker {
  height: 280px;
}

其他框架适配 #

• Vue项目：将::ng-deep替换为::v-deep或/deep/
• React项目：无需样式穿透，直接将样式写在全局样式文件中，或使用CSS Modules的全局语法

可选：适配字体大小 #

如果调整尺寸后内容显示不协调，可同步修改弹出框内的字体大小：

:host ::ng-deep .p-calendar-panel * {
  font-size: 0.8rem;
}

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