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

Question

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

它应该是这样的：

现在是这样的：

这是我的日历所在的代码：

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

需要导入对应的cssreact-datetime库，让DatePicker的样式正确

这应该可以解决问题：

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

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

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

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

react-datetime dropdown has missing styles(css)

reactjs

react-datetime