如何修改react-date-range中选中日期范围的文本颜色？

react-date-range没有直接提供修改选中日期文本颜色的内置属性，需要通过自定义CSS覆盖组件默认样式来实现，以下是两种可行的方案：

方案一：自定义className配合外部CSS #

1. 给DateRangePicker组件添加自定义类名，同时引入基础样式和主题样式：

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

function App() {
  const [selectedRange, setSelectedRange] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'range'
    }
  ]);

  return (
    <DateRangePicker
      ranges={selectedRange}
      onChange={item => setSelectedRange([item.range])}
      className="custom-date-picker"
      rangeColors={['#3498db']} // 可选：设置选中范围的背景色
    />
  );
}

export default App;

2. 在外部CSS文件中添加样式，覆盖默认文本颜色：

/* 修改选中范围内的日期文本颜色 */
.custom-date-picker .rdrInRange {
  color: #ffffff !important;
}

/* 修改选中范围首尾日期的文本颜色 */
.custom-date-picker .rdrStartEdge,
.custom-date-picker .rdrEndEdge {
  color: #ffffff !important;
}

注：使用!important是为了确保自定义样式优先级高于组件默认样式，若不生效可检查类名是否匹配。

方案二：使用CSS-in-JS（如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';
import { useState } from 'react';

const StyledDateRangePicker = styled(DateRangePicker)`
  .rdrInRange {
    color: #ffffff;
  }
  .rdrStartEdge, .rdrEndEdge {
    color: #ffffff;
  }
`;

function App() {
  const [selectedRange, setSelectedRange] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'range'
    }
  ]);

  return (
    <StyledDateRangePicker
      ranges={selectedRange}
      onChange={item => setSelectedRange([item.range])}
      rangeColors={['#3498db']}
    />
  );
}

export default App;

关键类名说明 #

• rdrInRange：选中日期范围内的中间日期元素
• rdrStartEdge：选中范围的开始日期元素
• rdrEndEdge：选中范围的结束日期元素

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