react-leaflet / Mapcontainer有问题

Question

组件渲染得很好，但它没有显示，所以我从 Inspect 更改了一些 css 属性。 我将 map 容器放在 div 中的部分页面中 - 但 map 的工作方式与 div 不同。 这是我的代码。

<div className={style.map_container}> //this my container I wrote it
     <MapContainer style={{height:'80px',width:'80'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
       <TileLayer   attribution='contributors'
       url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
      <Marker position={[51.505, -0.09]}>
        <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
     </Marker>
   </MapContainer>
</div>

我还将 leaflet 的主要 css 放在 index.html

我不知道我在做什么，但我认为 css 有问题。

Answer 1

您应该分配的主要属性是高度 - 我应该在我的组件的内联 css 属性中设置高度，

react-leaflet你必须考虑这个规则

<MapContainer style={{width:'90%',height:'99%'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>

哒哒哒！！！ map 工作得很好