如何为React DatePicker组件设置自定义高度与宽度？

方法1：提升自定义样式优先级 #

popperClassName其实是生效的，只是你的样式被组件默认样式覆盖了。给自定义类加嵌套选择器，提高优先级即可：

比如Styles.calendarPopper对应的CSS这么写：

.calendarPopper .react-datepicker {
  width: 350px; /* 自行修改数值 */
  height: 400px;
}

/* 若需要调整日历内日期格子的大小，可添加这段 */
.calendarPopper .react-datepicker__day {
  height: 45px;
  line-height: 45px;
}

方法2：使用calendarClassName属性（更精准） #

react-datepicker提供了专门给日历容器添加类名的属性calendarClassName，比popperClassName更直接，无需考虑popper的嵌套层级：

修改组件代码，新增该属性：

<DatePicker 
  selected={startDate} 
  dateFormat="MM/yyyy/dd"
  popperPlacement="top-end"
  calendarClassName={Styles.customCalendar} // 添加这一行
  icon={<SmCalenderIcon />}
  onChange={(date) => handleDateChange(date)}
  className={Styles.datePicker}
  maxDate={new Date()}
  shouldCloseOnSelect={false}
/> 

对应的CSS写法：

.customCalendar {
  width: 380px !important; /* 用!important强制覆盖默认样式，或通过父元素选择器提升优先级 */
  height: 420px !important;
  overflow-y: auto; /* 若高度设置过小，添加滚动条避免内容溢出 */
}

方法3：全局样式覆盖（应急用，不推荐） #

如果上述方法都无效，可直接全局覆盖react-datepicker的默认类，但注意这会影响所有页面的datepicker组件：

.react-datepicker {
  width: 350px !important;
  height: 400px !important;
}

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