如何增大react-datepicker日历弹窗的宽度和高度？

你之前的尝试无效主要有两个原因：

• .react-datepicker-popper 是弹窗的定位容器（由Popper.js控制），本身不负责日历内容的宽高渲染
• 你的CSS代码错误地给属性值加了引号——CSS里不需要引号，width: "500px" 是无效写法，应改为 width: 500px;

以下是几种可行的实现方式：

1. 全局CSS调整（最简单直接） #

直接针对日历核心容器 .react-datepicker 设置宽高，同时按需调整内部元素样式适配更大尺寸：

/* 设置日历核心容器的宽高 */
.react-datepicker {
  width: 500px;
  height: 500px;
}

/* 可选：调整日历头部内边距，避免内容拥挤 */
.react-datepicker__header {
  padding: 1.5rem;
}

/* 可选：增大日期单元格尺寸，提升可读性 */
.react-datepicker__day {
  width: 4.5rem;
  line-height: 4.5rem;
  font-size: 1.2rem;
}

/* 可选：调整月份标题字体大小 */
.react-datepicker__current-month {
  font-size: 1.5rem;
}

2. 自定义类名隔离样式（避免全局污染） #

给DatePicker组件添加自定义类名，通过后代选择器精准设置样式：

<DatePicker className="large-calendar" />

对应的CSS：

.large-calendar .react-datepicker {
  width: 500px;
  height: 500px;
}

.large-calendar .react-datepicker__day {
  width: 4rem;
  line-height: 4rem;
}

3. 使用组件自带的customStyle属性 #

react-datepicker提供了customStyle属性，可直接传入内联样式对象控制外层容器：

<DatePicker
  customStyle={{
    width: "500px",
    height: "500px"
  }}
/>

注意：该属性仅控制日历外层容器，内部日期单元格等元素仍需额外CSS调整。

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