如何修改react-day-picker中非hover/focus状态日期的背景色

要修改非hover或focus状态的日期背景色，直接设置.rdp-day无效的原因是默认样式优先级或状态覆盖问题，你需要用更精准的选择器，排除掉特殊状态的日期元素：

/* 仅对常规状态（未选中、未禁用、非hover/focus）的日期生效 */
.rdp-day:not(.rdp-selected):not(.rdp-disabled):not(:hover):not(:focus) {
  background-color: #f0f0f0; /* 替换为你需要的背景色 */
}

选择器说明： #

• :not(.rdp-selected)：排除已选中的日期
• :not(.rdp-disabled)：排除禁用的日期
• :not(:hover):not(:focus)：排除hover和focus状态的日期

如果还是不生效，可以给DayPicker组件添加自定义类名来提高样式优先级：

<DayPicker className="custom-date-picker" />

对应的CSS：

.custom-date-picker .rdp-day:not(.rdp-selected):not(.rdp-disabled):not(:hover):not(:focus) {
  background-color: #f0f0f0;
}

注意：react-day-picker提供的--rdp-background-color变量仅作用于hover/focus状态的元素，无法用来修改常规状态的日期背景。

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