react-datepicker已选中日期颜色修改及对应CSS选择方法

对应元素类名说明 #

• 单个选中的日期元素：.react-datepicker__day--selected
• 范围选择模式下的起始日期：.react-datepicker__day--range-start
• 范围选择模式下的结束日期：.react-datepicker__day--range-end
• 范围选择模式下起始和结束中间的所有区间日期：.react-datepicker__day--in-range
• 选范围过程中临时高亮的区间日期：.react-datepicker__day--in-selecting-range

样式修改示例 #

单个日期选中场景 #

.react-datepicker__day--selected {
  /* 按需替换为你需要的颜色值即可 */
  background-color: #2385bb !important;
  color: #ffffff !important;
  border: none;
}

范围日期选中场景 #

/* 范围首尾日期样式 */
.react-datepicker__day--range-start,
.react-datepicker__day--range-end {
  background-color: #1a6ca1 !important;
  color: #ffffff !important;
}

/* 范围中间区间日期样式 */
.react-datepicker__day--in-range {
  background-color: #d7ecf7 !important;
  color: #1a6ca1 !important;
}

注意：如果自定义样式不生效，可通过提高选择器权重、添加!important、调整自定义样式引入顺序（晚于react-datepicker默认样式引入）来解决。

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