react-datepicker css 未被应用

Question

我正在使用基于 Symfony 的 React 应用程序，并尝试使用 react-datepicker 模块包含一个日期选择器。

我可以创建日期选择器对象，但它的样式似乎不正确 - 当我单击以选择日期时，页面顶部只有一个垂直的数字列表（我见过很多人在线体验，通常是因为他们没有导入 datepicker css）。

我正在导入 react-datepicker.css 文件，如果我在浏览器中检查我的 datepicker 对象，它会显示：class="react-datepicker-wrapper"，所以我认为导入工作正常。

我想知道我是否还需要对我的应用程序中的另一个文件做一些其他事情，也许是 webpack 文件，或者其他与 Symfony 相关的东西，但我是这些东西的真正新手并且有点卡住了。

非常感谢您的帮助！代码如下！

import DatePicker from "react-datepicker";
import "../../../node_modules/react-datepicker/dist/react-datepicker.css";


class MyWidget extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    }

  }

  handleCalendarClose() {
    console.log("Calendar closed")
  }

  handleCalendarOpen() {
    console.log("Calendar opened")
  }

  setStartDate(startDate) {
    this.setState({
      startDate: startDate
    });

  };


  render() {
    const { startDate } = this.state;

      return (
          <div>
            From: <DatePicker
              selected={startDate}
              onChange={startDate => this.setStartDate(startDate)}
              onCalendarClose={this.handleCalendarClose}
              onCalendarOpen={this.handleCalendarOpen}
            />
          </div>
      );
    }
  }
}

Answer 1

来自文档：https://github.com/Hacker0x01/react-datepicker

你还需要从这个包中获取 CSS 文件（或者 提供你自己的）。下面的示例显示了如何从中包含 CSS 如果您的构建系统支持需要 CSS 文件，则此包 （Webpack 就是这样做的）。

将此行添加到您的代码中......

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

例如...

import React, { useState } from "react";
import DatePicker from "react-datepicker";

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

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

Answer 2

像这样导入，对我有用

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

Answer 3

如果您的应用程序正在使用 Remix，请在您的根文件中添加：

export const links: LinksFunction = () => [
          {
           rel: "stylesheet", 
           href: 'https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css'
          },
    ]

或者在 Nextjs 中：

 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />

Answer 4

Webpack 可能没有正确加载 CSS 文件。您可以尝试使用

style-loader

和

css-loader modules

.

将 CSS 文件直接导入到您的组件中

首先，安装两个模块：

npm install style-loader css-loader --save-dev

然后，像这样在组件中导入 CSS 文件：

import React from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import styles from "./MyWidget.module.css";

const MyWidget = () => {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div className={styles.datePickerWrapper}>
      <DatePicker
        selected={startDate}
        onChange={date => setStartDate(date)}
      />
    </div>
  );
};

导出默认的MyWidget； 在此示例中，我还使用 CSS 模块将自定义样式应用于包装器 div。您可以在单独的 CSS 文件中定义自己的样式，并以与

react-datepicker.css

文件相同的方式导入它。

Answer 5

您可以使用 react-multi-date-picker 更好更灵活！