react-datetime下拉菜单CSS样式缺失无法正常显示问题求助

问题根因 #

react-datetime组件默认不会自带样式，你没有引入配套的CSS文件，才会出现下拉菜单排版错乱的情况。

修复步骤 #

1. 在你的AddEvent组件文件头部引入官方样式文件，添加如下导入语句：

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

如果导入时报错找不到CSS文件，可尝试替换为旧版本的路径：

import 'react-datetime/dist/react-datetime.css';

2. 如果引入后发现下拉菜单被Modal遮挡，可在全局CSS中添加如下样式调整层级：

.rdtPicker {
  z-index: 9999 !important;
}

修复后的完整代码 #

import React, {useState} from 'react'
import Modal from "react-modal"
import Datetime from 'react-datetime';
// 新增样式导入
import 'react-datetime/css/react-datetime.css';


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

内容的提问来源于stack exchange，提问作者Chen