正确显示 react-datepicker 控件

Question

我正在尝试使用“react-datepicker”组件，但它显示正确。具体来说，它有一个行高。

相信 CSS 是正确导入的。我做到了：

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

我可以看到确实导入了 [一些] react-datepicker 样式。我只是不明白为什么我的“popper”显示在一行中。

我将组件用作：

    <div className="date-picker">
      <DatePicker 
      onChange={() => {}}
      selected={startDate}
    />

请指教。如果我将flex-direction: column; 添加到react-datepicker__month、react-datepicker__month-container 和react-datepicker__header，问题就消失了。

Answer 1

你应该使用相对路径而不是绝对路径。

您可以从 node_modules 导入日期选择器 css 文件

导入喜欢 导入'../node_modules/react-datepicker/dist/react-datepicker.css';