react-leaflet map does not show up

Question

i have this code in one of my components

class MyMap extends Component {

   state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 11
    };

    render() {
        const position = [this.state.lat,this.state.lng]
         return (
             <MapContainer  className="mymap" center={position} zoom={this.state.zoom}  scrollWheelZoom={false}>
             <TileLayer
                   attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>  contributors'
                   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              <Marker position={position}>
              </Marker>
            </MapContainer >
      )
  }
}

Also i have install leaflet by this command

  npm install -s react-leaflet

Also i have insert the leaflet's CSS in my index.html file

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

Also i give in MapContainer a

ClassName="mymap"

Which includes the following CSS code

 .mymap {
     height: '100vh';
     width: 100%;
} 

So my problem is that my map is not show up, can anyone help me?

Answer 1

import leaflet.css

import 'leaflet/dist/leaflet.css'

then set inline style for <MapContainer>

<MapContainer style={{ height: "450px", width: "100%" }} center={position} zoom={this.state.zoom}>

Answer 2

I solved my problem. I have to get rid of this from my index.html

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq /sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>

Also in my MyMap component i inserted this

 import 'leaflet/dist/leaflet.css';