React Datepicker CSS 搞砸了

Question

我正在使用 HackerOne 的这个模块： https: //reactdatepicker.com

将模块安装并导入到我的项目后，我决定从站点中选择“选择时间”组件。

我的代码

import React, { Component } from "react";
import { Form, Button } from "react-bootstrap"
import DatePicker from "react-datepicker"

export default class AddEventModal extends Component {

    constructor(props) {
        super(props)

        this.state = {
            date: new Date()
        }
    }

    render() {
        return (
            <Form>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Title <span style={{ color: "red" }}>*</span></Form.Label>
                    <Form.Control type="text" placeholder="Enter a Title" className="col-6" />
                    <Form.Text className="text-muted">
                        Enter a Title for your Event.
                        </Form.Text>
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Description</Form.Label>
                    <Form.Control type="text" placeholder="Enter a Description" className="col-6" />
                </Form.Group>

                <DatePicker
                    selected={this.state.date}
                    onChange={newDate => this.setState({ date: newDate })}
                    showTimeSelect
                    timeFormat="HH:mm"
                    timeIntervals={15}
                    timeCaption="time"
                    dateFormat="MMMM d, yyyy h:mm aa"
                />

                <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" label="Check me out" />
                </Form.Group>
                <Button variant="success" type="submit">
                    Submit
                    </Button>
            </Form>

        );
    }
}

我的输出 https://i.stack.imgur.com/2L1Rv.png

它不应该是这样的......该网站有工作演示。我究竟做错了什么？

编辑：答案在评论中。我缺少 css 导入

Answer 1

好像我缺少 css 导入。可惜该网站没有明确提及这一点。

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