React DatePicker选中偶数时段背景色不更新问题求助

• 问题核心：你给偶数时间槽设置的背景色样式优先级高于组件默认的选中状态样式，而且react-datepicker的选中时间项不是靠:focus伪类标记的，而是通过添加react-datepicker__time-list-item--selected类来标识选中状态，所以用:focus无效。

• 修复方法：

  1. 用更精准的选择器，针对选中的偶数时间槽单独设置样式，覆盖原有背景色：

     /* 基础写法 */
     .react-datepicker__time-list-item--selected:nth-child(even) {
       background-color: #007bff; /* 替换成你需要的蓝色值 */
       color: #fff; /* 可选，让文字和背景对比度更高 */
     }
     
     /* 如果上面的样式仍不生效，提升选择器权重 */
     .react-datepicker__time-list .react-datepicker__time-list-item--selected:nth-child(even) {
       background-color: #007bff;
     }
     
     /* 极端情况（不推荐优先使用）：用!important强制覆盖 */
     .react-datepicker__time-list-item--selected:nth-child(even) {
       background-color: #007bff !important;
     }
     

  2. 如果你用的是CSS Modules，需要把选择器声明为全局样式：

     :global(.react-datepicker__time-list-item--selected:nth-child(even)) {
       background-color: #007bff;
     }
     

• 验证方式：点击偶数时段后，查看DOM元素是否同时带有react-datepicker__time-list-item--selected类和nth-child(even)的位置特征，确认样式是否正确应用。

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