React DatePicker的Popper留在传单下方MapContainer下方

Question

我正在尝试在我的项目中使用React DatePicker，但DatePicker的Popper留在我的传单地图下方。

我还使用React Select Select组件，并且可以按预期工作，所以我猜这不是Z指数问题。我不明白是什么原因引起了问题。

我尝试了给出类似问题的答案，但对我没有任何帮助。

感谢任何帮助，谢谢。

datepicker

select

<Flex direction="column" bg={"#242b2c"}>
            <Wrap align="stretch"
                justify="stretch"
                alignContent="stretch"
                spacing={0}
                w="full">
                <HStack borderRadius="sm"
                    h={""}
                    p={"2"}

                    alignItems="center"
                    justify="center">

                    <VStack spacing={0}>
                        <Select
                            onChange={selectedEq}
                            value={selectValue}
                            width="160px"
                            bg="white"
                            placeholder='Select a device'>
                            {data.map(item => (
                                <option key={item.id}>{item.equipmentId}</option>
                            ))}
                        </Select>
                    </VStack>

                    <VStack spacing={0}>
                        <DatePicker
                            portalId="root"
                            selected={startDate}
                            onChange={date => setStartDate(date)}
                            showTimeSelect
                            timeIntervals={5}
                            timeFormat="HH:mm"
                            dateFormat='yyyy/MM/dd h:mm'
                            isClearable
                            showYearDropdown
                            popperProps={{
                                positionFixed: true
                            }}
                        />
                    </VStack>
                </HStack>

            </Wrap>
            <MapContainer
                center={position}
                zoom={7}
                scrollWheelZoom={true}
                style={{ width: '100%', height: '95vh' }}
            >
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                />

                {data.map(item => {
                    if (item.equipmentId === selectValue)
                        return (
                            <Marker key={item.id} position={[item.latitude, item.longitude]} icon={GetIcon(item.equipmentId)}>
                                <Popup>{item.equipmentId}</Popup>
                            </Marker>
                        );
                })}

            </MapContainer>
        </Flex> 

Answer 1

我整天都在努力，休息后，我找到了解决方案。

我没有将MapContainer直接放入Flex中，而是将其放在盒子容器中，然后制作盒子容器的Zindex = 1。这个简单的解决方案花了我整整一天的时间来弄清楚，所以我要把解决方案放在这里:)

<Flex direction="column" bg={"#242b2c"}>
            <Wrap align="stretch"
                justify="stretch"
                alignContent="stretch"
                spacing={0}
                w="full">
                <HStack borderRadius="sm"
                    h={""}
                    p={"2"}

                    alignItems="center"
                    justify="center">

                    <VStack spacing={0}>
                        <DatePicker
                            portalId="root-portal"
                            bg="white"
                            width="160px"
                            selected={startDate}
                            onChange={date => setStartDate(date)}
                            showTimeSelect
                            timeIntervals={5}
                            timeFormat="HH:mm"
                            dateFormat='yyyy/MM/dd h:mm'
                            isClearable
                            showYearDropdown
                        />
                    </VStack>
                </HStack>

            </Wrap>
            <Box zIndex={1}>
                <MapContainer
                    center={position}
                    zoom={7}
                    scrollWheelZoom={true}
                    style={{ width: '100%', height: '95vh' }}

                >
                    *same code*

                </MapContainer>
            </Box>
        </Flex>

Answer 2

我也有一个类似的问题，一个流浪者留在MapContainer后面。

但是上述解决方案并没有为我解决。 MapContainer将Zindex设置为600，其控件为1000。我通过直接在Popper（MUI）本身上设置较高的Zindex解决了它。 （不是Popper中的内容）