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

您需要为react-datetime库导入相应的css，以便DatePicker具有正确的样式。

这应该可以解决这个问题：

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 (值得一读)

​

​