如果你不想在开始和结束日期的背景颜色，你必须覆盖默认的CSS，这是越来越由React日期选择器库应用您可以尝试在您的全局CSS文件中使用此CSS

.react-datepicker__day--range-end, .react-datepicker__day--range-start {
        border-radius: 50% !important;
        background-color: transparent !important;
        color: #e3f762 !important;
        border: 1px solid #000;
}

字符串

无论如何，我通过将::before和::after添加到start-date和end-date来解决我的问题。

.react-datepicker__day--range-end::before,
.react-datepicker__day--range-start::before {
  border-radius: 50% !important;
  width: 100%;
  content: "";
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1 !important;
  background-color: #222 !important;
}

.react-datepicker__day--range-start::after {
  width: 50%;
  content: "";
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0 !important;
  background-color: #e3f762 !important;
}

.react-datepicker__day--range-end::after {
  width: 50%;
  content: "";
  height: 100%;
  position: absolute;
  right: 50%;
  top: 0;
  z-index: 0 !important;
  background-color: #e3f762 !important;
}

字符串
最后，我通过在自定义日期显示中添加renderDayContents prop 来自定义DatePicker day：

<DatePicker
    onChange={onChange}
    startDate={startDate}
    endDate={endDate}
    selectsRange
    selectsDisabledDaysInRange
    renderDayContents={(day) => <span>{day}</span>}
    inline
/>

型
日内容的样式：

.react-datepicker__day--range-end span,
.react-datepicker__day--range-start span {
  position: absolute;
  z-index: 5;
  color: #e3f762 !important;
}

型