未应用反应日期选取器 css

Question

我正在使用一个基于Symfony的react应用程序，并试图使用react-datepicker模块包含一个datepicker。

我可以创建datepicker对象，但它的样式似乎不正确——当我单击选择日期时，页面顶部只有一个垂直的数字列表（我看到很多人在网上经历过这种情况，通常是因为他们没有导入datepicker css）。

我正在导入react-datepicker.css文件，如果我在浏览器中检查我的datepicker对象，它会显示:class = " react-date picker-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

//像这样导入，对我很管用

从“react DatePicker”导入DatePicker
导入“react datepicker/dist/react datepicker.css”；