时间戳

首页 > 解决方案 > 正确显示 react-datepicker 控件

css - 正确显示 react-datepicker 控件

问题描述

我正在尝试使用“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-containerreact-datepicker__header

标签： cssreactjsflexboxreact-datepicker

解决方案

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

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

像 import '../node_modules/react-datepicker/dist/react-datepicker.css' 一样导入；

推荐阅读