如何自定义 React-Day-Picker 输入？

Question

这是我的代码

<DayPickerInput 
   placeholder={"Date..."} 
   onDayChange={day => setNewDate(day)}
   className="day"
/>

.day {
  text-align: center;
  text-size-adjust: 100;
  border-radius: 30px;
  background: var(--bg-accent);
  color: var(--text-color);
  width: 120px;
  height: 40px;
  border: none;
  margin-top: 50px;
  margin-right: 10px;
  margin-left: 10px;
}

但所有这些都不会影响日期选择器输入。例如，我将如何更改日期选择器的背景？

Answer 1

看起来 DayPickerInput 不支持自定义类，尝试使用默认 .DayPickerInput 类名。

Answer 2

没有为包 react-day-picker 中的输入字段定义特定的 class，但是我们可以获得 DOM 结构，因为您可以看到它就在 classDayPickerInput

<div class="DayPickerInput">
  <input placeholder="YYYY-M-D" value="">
</div>

所以唯一剩下要做的就是使用 CSS 元素选择器

.DayPickerInput > input {
  background-color: lightblue;
}

如何自定义 React-Day-Picker 输入？

How to customise React-Day-Picker input?

css

reactjs

react-day-picker