如何更改在 react-date-range 包中选择的输入的颜色？

Question

我无法自定义 css 在此日期选择器包中选择的聚焦输入的背景颜色

Answer 1

您应该将样式 @wojtekmaj/react-daterange-picker/dist/DateRangePicker.css 和 react-calendar/dist/Calendar.css 复制到您的项目中。

像这样使用无样式选项：

import { useState } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker/dist/entry.nostyle';

import './App.css';
import './Calendar.css';
import './DateRangePicker.css';

function App() {
  const [value, onChange] = useState([new Date(), new Date()]);

  return (
    <div>
      <DateRangePicker
        onChange={onChange}
        value={value}
      />
    </div>
  );
}

export default App;

并添加到 DateRangePicker.css:


.react-daterange-picker__inputGroup__input:focus {
  background: red;
}

Answer 2

这是codesandbox中react-daterange-picker的demo代码，你可以很容易的找到对应的样式信息 Screenshots

Answer 3

我的组件 DateRange 的示例，仅更改属性 rangeColors={['#f33e5b', '#3ecf8e', '#fed14c']}

你需要传递数组中的三个值

<DateRange
          editableDateInputs={true}
          onChange={item => setDate([item.selection])}
          moveRangeOnFirstSelection={false}
          ranges={date}
          className={styles.date}
          locale={locales[locale]}
          date={date}
          endDatePlaceholder="Continuo"
          rangeColors={['#f33e5b', '#3ecf8e', '#fed14c']}
        />
      </div>

如何更改在 react-date-range 包中选择的输入的颜色？

How I can change color of input selected in react-date-range package?

reactjs

react-daterange-picker