如何修改React DateRangePicker中当前日期的下划线颜色

1. 用CSS优先级覆盖（最常用方案） #

react-date-range的当前日期下划线一般通过伪元素.rdrDayToday .rdrDayNumber::after实现，你可以通过自定义类+高优先级选择器覆盖默认样式：

先给DateRangePicker组件添加自定义类：

import { DateRangePicker } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

// 组件调用
<DateRangePicker className="custom-date-picker" />

然后在CSS文件中编写样式：

.custom-date-picker .rdrDayToday .rdrDayNumber::after {
  border-bottom-color: #ff6b6b; /* 替换成你需要的颜色 */
  /* 如需调整下划线粗细、样式，可追加border-bottom-width、border-bottom-style属性 */
}

如果样式未生效，检查自定义CSS是否在react-date-range默认样式之后加载——必须先引入默认样式，再加载自定义样式，才能确保覆盖生效。

2. 别再用rangesColors了，它不负责当前日期样式 #

你之前尝试的rangesColors属性是用来自定义选中日期范围的颜色的，和当前日期的下划线完全不相关，这个方向从一开始就不对，不用再耗费精力。

3. 用CSS-in-JS（比如styled-components） #

如果项目使用styled-components这类CSS-in-JS方案，可以直接封装组件：

import styled from 'styled-components';
import { DateRangePicker } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

const StyledDateRangePicker = styled(DateRangePicker)`
  .rdrDayToday .rdrDayNumber::after {
    border-bottom-color: #4ecdc4;
  }
`;

// 使用时直接调用封装后的组件
<StyledDateRangePicker />

小提示 #

如果还是没生效，打开浏览器开发者工具，定位当前日期的DOM元素，查看下划线对应的CSS规则——不同版本的react-date-range类名可能有细微变化，确认选择器准确后再编写样式。

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