与容器 div 重叠的传单地图

Question

所以我去了传单文档并复制粘贴的示例，我在那里找到了看看是否可以重现地图，但是，地图不仅损坏了，而且还与它所在的容器重叠。我试图给出宽度和.leaflet-container高度的固定值，但是他们甚至没有被认可。

所以我的问题是我有什么遗漏的吗？

传单组件示例

import 'leaflet/dist/leaflet.css';
export default class LeafletMap extends Component {
    constructor() {
        super()
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
  }
    render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br/> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

它正在被导入，就像

<div className="hotel_description_card_right">
   <div className="hotel_description_card_right_container">

       <LeafletMap /> // here

   </div>
</div>

现在看起来怎么样

Answer 1

尝试使用

import "leaflet/dist/leaflet.css";

在你的app.js文件中。

这对我有用。