如何调整react-datepicker输入框高度？内联CSS无效求助

你之前的写法无效是因为style={{root: {height: 7000}}}不符合组件API：react-datepicker的style prop是直接给根容器设置样式（而非嵌套root对象），且根容器样式不会传递到内部输入框。以下是几种可行方案：

方案1：通过inputProps传递输入框样式 #

利用组件提供的inputProps属性，直接给内部的<input>元素设置内联样式：

<DatePicker
  inputProps={{ style: { height: '50px', padding: '0 12px', fontSize: '16px' } }}
  selected={startDate}
  onChange={onDateChange}
  startDate={startDate}
  endDate={endDate}
  selectsRange
/>

方案2：使用自定义输入框（customInput） #

完全自定义输入框组件，精准控制样式：

<DatePicker
  customInput={<input style={{ height: '50px', border: '1px solid #ddd', borderRadius: '4px' }} />}
  selected={startDate}
  onChange={onDateChange}
  startDate={startDate}
  endDate={endDate}
  selectsRange
/>

方案3：通过CSS类名全局覆盖 #

借助组件自带的CSS类名，在全局样式文件中覆盖输入框样式：

/* 针对react-datepicker的输入框 */
.react-datepicker__input-container input {
  height: 50px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
}

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