如何移除react-datepicker中非当前月份日期的范围高亮效果

启用日期范围选择功能后，组件默认会给当前视图内所有落在startDate、endDate区间内的日期添加范围高亮样式，包含不属于当前展示月份的上月末尾、下月开头的补位日期。
问题效果示例：

可根据业务需求选择以下两种方案解决：

• 方案1：保留非当前月日期显示，仅移除范围高亮
  利用组件提供的dayClassName属性，给非当前展示月份的日期添加自定义类，覆盖默认的范围高亮样式即可。
  组件代码示例：

import { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import './datepicker-fix.css';

export default function CustomRangePicker() {
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
  // 记录当前面板展示的月份
  const [currentDisplayMonth, setCurrentDisplayMonth] = useState(new Date());

  return (
    <DatePicker
      selectsRange
      startDate={startDate}
      endDate={endDate}
      onChange={(update) => setDateRange(update)}
      // 切换月份时同步更新记录的展示月份
      onMonthChange={(month) => setCurrentDisplayMonth(month)}
      // 为每个日期单元格动态添加类名
      dayClassName={(date) => {
        const isSameMonth = date.getMonth() === currentDisplayMonth.getMonth() 
          && date.getFullYear() === currentDisplayMonth.getFullYear();
        return isSameMonth ? '' : 'non-current-month-day';
      }}
    />
  );
}

对应CSS样式（需保证优先级高于组件默认样式）：

/* 移除非当前月日期的范围选中、选择中高亮 */
.react-datepicker__day.non-current-month-day.react-datepicker__day--in-range,
.react-datepicker__day.non-current-month-day.react-datepicker__day--in-selecting-range {
  background: transparent !important;
  color: #ccc !important;
  border-radius: 0;
}

/* 可选：如果需要保留范围起点、终点选中时的样式可添加以下代码，不需要可删除 */
.react-datepicker__day.non-current-month-day.react-datepicker__day--range-start,
.react-datepicker__day.non-current-month-day.react-datepicker__day--range-end,
.react-datepicker__day.non-current-month-day.react-datepicker__day--selected {
  background: #1677ff !important;
  color: #fff !important;
}

• 方案2：直接隐藏非当前月的补位日期
  如果业务不需要在当前面板显示上下月的补位日期，直接添加组件自带属性即可，从根源上避免非当前月日期被渲染、触发高亮：

<DatePicker
  selectsRange
  startDate={startDate}
  endDate={endDate}
  onChange={(update) => setDateRange(update)}
  showNonCurrentDates={false} // 隐藏非当前月日期
/>

注意：showNonCurrentDates属性在react-datepicker v4.0.0及以上版本可用，低版本需升级组件后使用。

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