React DatePicker的popper停留在Leaflet MapContainer下面

Question

我试图在我的项目中使用React DatePicker，但DatePicker的popper停留在我的传单地图下面。

我也使用React选择组件，它按预期工作，所以我猜这不是一个z指数问题。我不明白是什么引起了这个问题。

我试过类似问题的答案，但都不适合我。

我很感激你的帮助，谢谢。

datepicker

选择

<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中，我把它放在一个Box容器，并使Box容器的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>