如何为react-datepicker中的startDate和endDate单独设置样式？

需要为react-datepicker组件中范围选择的startDate和endDate单独设置样式，当前选中范围的样式统一，预期效果是起始月份和结束月份拥有差异化样式（如特殊背景、边框等）。

当前使用的组件代码如下：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function NewMonthCalendar({ confirmDate, cancelMonthDate, startMonthDate, setStartMonthDate, endMonthDate, setEndMonthDate }) {

    const years = range(1990, getYear(new Date()) + 1, 1);

    const onChangeDateHandler = (value) => {
        setStartMonthDate(value[0])
        setEndMonthDate(value[1])
    }

    const ExampleCustomInput = ({ value, onClick }) => (
        <span className="example-custom-input" onClick={onClick}>
            {value}
        </span>
    );
    
    const renderMonthContent = (month, shortMonth, longMonth) => {
        const tooltipText = `Tooltip for month: ${longMonth}`;
        return <span title={tooltipText}>{shortMonth}</span>;
    };

    return (
        <div className='monthCalendar'>
            <DatePicker
                className="custom-input-style"
                renderCustomHeader={({
                    date,
                    changeYear,
                    decreaseYear,
                    increaseYear,
                    prevMonthButtonDisabled,
                    nextMonthButtonDisabled,
                }) => (
                    <div className='monthHeader'>
                        <select
                            className="custom-select-style"
                            value={getYear(date)}
                            onChange={({ target: { value } }) =>
                                changeYear(value)
                            }
                        >
                            {years.map((option) => (
                                <option key={option} value={option}>
                                    {option}
                                </option>
                            ))}
                        </select>

                        <div className='dateArrow'>
                            <button
                                onClick={decreaseYear}
                                disabled={prevMonthButtonDisabled}
                            >
                                <img src={lessthan} alt="" />
                            </button>

                            <button
                                onClick={increaseYear}
                                disabled={nextMonthButtonDisabled}
                            >
                                <img src={greaterthan} alt="" />
                            </button>
                        </div>
                    </div>
                )}
                selectsRange={true}
                startDate={startMonthDate}
                endDate={endMonthDate}
                onChange={onChangeDateHandler}
                dateFormat="MMM"
                renderMonthContent={renderMonthContent}
                showMonthYearPicker
                shouldCloseOnSelect={false}
                customInput={<ExampleCustomInput />}
                inline
            >
                <div className='buttonAction67' >
                    <span onClick={confirmDate}>Confirm</span>
                    <span onClick={cancelMonthDate}>Cancel</span>
                </div>
            </DatePicker>

        </div>
    )
}

react-datepicker在范围选择模式下，会为起始月份、结束月份和中间范围的月份分别添加特定CSS类，通过自定义CSS即可覆盖默认样式：

1. 添加自定义样式（可放在组件样式文件或全局样式中）：

/* 起始月份样式 */
.react-datepicker__month-option--start-date {
  background-color: #2563eb;
  color: white;
  border-radius: 4px 0 0 4px;
}

/* 结束月份样式 */
.react-datepicker__month-option--end-date {
  background-color: #dc2626;
  color: white;
  border-radius: 0 4px 4px 0;
}

/* 中间范围月份样式（可选） */
.react-datepicker__month-option--in-range {
  background-color: #dbeafe;
  color: #1e40af;
}

/* 悬停状态优化（可选） */
.react-datepicker__month-option--start-date:hover,
.react-datepicker__month-option--end-date:hover {
  opacity: 0.9;
}

2. 注意事项：

• 若使用CSS Modules，需确保样式能作用到react-datepicker的子元素，或改用全局样式覆盖默认样式。
• 可根据预期效果调整颜色、边框、圆角等属性，匹配设计需求。
• 若上述类名不生效，可通过浏览器开发者工具查看元素实际类名，再调整CSS选择器。

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