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

Question

我无法使用此日期选择器包中选择的焦点输入的 css 背景颜色进行自定义

Answer 1

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

使用 no style 选项，如下所示：

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代码，可以很方便的找到对应的样式信息 截图