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

Question

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

这是它应该出现的样子：

这是它现在的样子：

这是我有日历的代码：

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

Answer 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（值得一读）