React-map-gl不能放入父<div>中

Question

我开始使用react-map-gl了。我遵循了https://github.com/visgl/react-map-gl中的示例。

它工作得很好。然而，地图的大小一直溢出到我页面的右侧和底部。该组件当前位于父div中。然而，我似乎不能将它包含在父div中。

有人知道怎么做吗？

Answer 1

我试着用下面的代码：

<div className="relative w-full h-full mr-10 pr-10" ref={targetRef}>
    <ReactMapGL
        mapStyle="mapbox://styles/mapbox/streets-v11"
        mapboxApiAccessToken={MAPBOX_TOKEN}
        onViewportChange={handleViewportChange}
        {...viewport}
    />
</div>

我使用的是tailwindcss。地图将呈现为充满整个屏幕。我正试着在右边添加边距或填充，但它不起作用。不过，我可以添加左边距。