反应传单没有正确显示地图

Question

我正在尝试使用 react 传单但是地图无法正确呈现下面是代码：

import {Marker, Popup, TileLayer} from "leaflet/dist/leaflet-src.esm";
import {render} from "@testing-library/react";
import {useCallback, useMemo, useRef, useState} from "react";
import 'leaflet/dist/leaflet.css';

const center = {
    lat: 51.505,
    lng: -0.09,
}


function MapContainer(props) {
    return null;
}

render(
    <MapContainer /*center={center} zoom={13} scrollWheelZoom={false}*/>
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
    </MapContainer>,
)
export default MapContainer;

以下是地图渲染不正确。

我试图搜索，但我没有通过它

Answer 1

在我的 .css 中添加以下行

@import url("~leaflet/dist/leaflet.css");

.leaflet-container {
  width: 100%;
  height: 100vh;
}