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

不应该这样...该站点具有正在运行的演示。我在做什么错？

Answer 1

似乎我缺少CSS导入。太可惜了，该网站没有明确提及。

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