由于 css 导入，React DatePicker 在 next.js 中无法工作

Question

我正在尝试在项目中使用react-date-pickernext.js。

我首先安装软件包：npm install react-date-picker

然后在我的_app.js文件中添加：

import "react-date-picker/dist/DatePicker.css";
import "react-calendar/dist/Calendar.css";

然后在我的自定义组件之一中，我尝试使用日期选择器：

import DatePicker from "react-date-picker";

const [dateValue,setDateValue] = useState(new Date());

<DatePicker value={dateValue} onChange={setDateValue} />

当我运行应用程序并尝试导航到包含日期选择器的页面时，出现以下错误：

我已按照文档进行操作，但仍然收到错误，并且不知道如何修复它。

Answer 1

这个包也不适合我，所以我找到了相同的包，但安装方式不同：

npm 安装react-datepicker

那么用法将是这样的：在您的组件中添加此行：

import DatePicker from "react-datepicker";
const Example = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={(date:Date) => setStartDate(date)}
 );
 };

样式导入将添加到您的 _app 文件中：

import "react-datepicker/dist/react-datepicker.css";

这是资源react-datepicker