reactjs - React-map-gl 不适合父级

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。地图被渲染以填满整个屏幕。我正在尝试在右侧添加边距或填充，但是它不起作用。我可以添加左边距。