如何修改react-date-range组件中被选中输入框的颜色？

react-date-range默认样式权重较高，普通CSS选择器无法直接覆盖，可通过以下三种方式调整：

• 方法1：使用!important提升CSS权重
  直接匹配组件内置类名修改样式，适合快速调试：

/* 匹配所有日期输入框聚焦状态 */
.rdrDateInput input:focus {
  background-color: #自定义色值 !important;
}
/* 仅匹配处于激活选中状态的输入框聚焦样式 */
.rdrDateInput.rdrDateActive input:focus {
  background-color: #自定义色值 !important;
}

• 方法2：通过组件内置Props传内联样式
  无需提升权重，通过组件官方提供的属性传入自定义样式即可生效：

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

function MyDatePicker() {
  const [dateRange, setDateRange] = useState([
    {
      startDate: new Date(),
      endDate: null,
      key: 'selection'
    }
  ]);

  return (
    <DateRangePicker
      onChange={item => setDateRange([item.selection])}
      ranges={dateRange}
      // 给范围选择器的输入框传样式
      inputRangeProps={{
        style: {
          '& input:focus': {
            backgroundColor: '#自定义色值'
          }
        }
      }}
    />
  )
}

如果使用的是单日期选择器DatePicker，将属性改为inputProps传入即可。

• 方法3：通过父容器嵌套选择器提升权重
  适合使用CSS模块、styled-components等方案的场景，无需加!important：

/* 外层自定义容器类名 + 组件内置类名组合，权重高于默认样式 */
.myDatePickerWrap .rdrDateInput.rdrDateActive input:focus {
  background-color: #自定义色值;
}

修改后可打开浏览器控制台元素面板，选中对应输入框查看样式是否被覆盖，若仍被划掉可再增加一级父元素类名进一步提升权重。

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