react-datetime 下拉列表缺少样式（css）答案

【问题标题】：react-datetime dropdown has missing styles(css)react-datetime 下拉列表缺少样式（css）
【发布时间】：2021-10-28 04:20:02
【问题描述】：

我正在制作一个日历应用程序，每当有人单击输入字段时，它应该显示为下拉菜单，并且在该下拉菜单中它应该让我选择字段。下拉菜单中缺少样式。

它应该是这样的：

这就是它现在的样子：

这是我的日历代码：

import React, {useState} from 'react'
import Modal from "react-modal"
import Datetime from 'react-datetime';


function AddEvent({isOpen, onClose, onEventAdded}) {
    const [title, setTitle] = useState("")
    const [start, setStart] = useState(new Date())
    const [end, setEnd] = useState(new Date())

    const onSubmit = (e) => {
        e.preventDefault()

        onEventAdded({
            title,
            start,
            end
        })
        onClose()
    }

    return (
            <Modal isOpen={isOpen} onRequestClose={onClose}>
                <form onSubmit={onSubmit}>
                    <input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
                    <div>
                        <label>Start Date</label>
                        <Datetime value={start} onChange={date => setStart(date)} />
                    </div>
                    <div>
                        <label>End Date</label>
                        <Datetime value={end} onChange={date => setEnd(date)} />
                    </div>
                    <button>Add Event</button>
                </form>
            </Modal>
    )
}

export default AddEvent

【问题讨论】：

标签： reactjs react-datetime

【解决方案1】：

你需要为DatePicker的react-datetime库导入相应的css才能有正确的样式。

这应该可以解决它：

import "react-datetime/css/react-datetime.css";

如果您遇到麻烦，我已在此代码框中复制了您的问题，您可以在其中看到它在工作https://codesandbox.io/s/quiet-sound-l6t6h?file=/src/Test.tsx:113-161

附加信息，这里也有说明https://www.npmjs.com/package/react-datetime（值得一读）

【讨论】：