React Datepicker CSS messed Up



我正在使用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导入

似乎我缺少了一个css导入。可惜网站没有明确提到这一点。

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

最新更新