react-dropdown-date年份选择器option:hover样式不生效求助

我用react-dropdown-date包实现日期选择功能，想要修改年份选择器里option的hover背景色，但发现直接修改option的基础样式能生效，option:hover的样式却完全被忽略。我已经查阅过这个包的文档，也尝试了修改标签选项的各种方法，都没解决问题。

我的代码 #

React组件代码 #

import { React, useState } from "react";
import { YearPicker, MonthPicker, DayPicker } from "react-dropdown-date";
import "./Datum.css";

function DatumElement() {
  var [datum, setDatum] = useState({
    year: null,
    month: null,
    day: null,
  });

  return (
    <div className="datumContainer">
      <YearPicker
        className="datum"
        defaultValue="select year"
        start={1970} // 默认是1900
        end={2020} // 默认是当前年份
        reverse // 默认是升序排列
        onChange={(year) => {
          // 必填
          setDatum({ ...datum, year: year });
        }}
      />
    </div>
  );
}

export default DatumElement;

注：原代码中错误使用了this.setDatum，函数组件无需this，已修正为直接调用setDatum

CSS代码 #

.datumContainer{
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    gap:2vw

}

select {
    height:1.5vw;
    width:5vw;
    font-size:0.8vw;
    border:none;
    border-radius:20px;
    font-family: 'Sunflower', sans-serif;
    font-weight: 900;
}

option:hover{
    background-color: red;
}

原因分析与解决方案 #

核心原因 #

原生HTML的<select>元素的<option>的:hover样式在绝大多数现代浏览器中不支持自定义——浏览器会强制使用系统默认的下拉菜单样式，自定义的hover规则会被直接忽略。而react-dropdown-date底层是基于原生<select>实现的，所以直接写option:hover不会生效。

解决办法 #

1. 替换为自定义下拉组件：如果必须实现hover样式自定义，建议替换react-dropdown-date，改用基于div模拟的自定义下拉组件（而非依赖原生select），或者自行封装年份选择的下拉逻辑，完全控制样式。
2. 利用浏览器支持的有限样式属性：虽然:hover不支持，但可以修改option的选中状态样式，优化视觉体验：

   option:checked {
       background-color: red;
       color: white;
   }
   

3. 检查包的自定义配置：再次查看react-dropdown-date的文档，确认是否支持传入自定义option的className或渲染组件。部分同类包允许通过props（比如optionClassName）给内部option元素绑定自定义类名，再针对该类编写样式。

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