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

Posted 2023-03-16

【中文标题】如何更改 react-date-range 包中选择的输入颜色？

【英文标题】：How I can change color of input selected in react-date-range package?

【发布时间】：2021-11-16 16:05:25

【问题描述】：

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

请通过选择您在对所选答案的评论中提到的适当标签（react-date-picker）来改进问题

【参考方案1】：

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

【讨论】：

感谢您的回答，但如果您有任何其他包，我在 react-date-range 包而不是 react-daterange-picker 中有问题，请在此处给出名称

[github.com/hypeserver/react-date-range](react-date-range) color(Calendar) 属性您可以在 README.md 的 Options 部分找到它

感谢它对我有用，在 rangeColors=['#6EA03E','#3e6ea0'] 中添加颜色表

【参考方案2】：

您应该将 Styles @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;

【讨论】：

感谢您的回答，但我在 react-date-range 包中遇到问题，而不是 react-daterange-picker