React-leaflet: Map rendering problem

[fborghi]

_"react-leaflet": "^2.6.3"
"leaflet": "^1.6.0"_

Hi everyone, hi have a problem with the map in my react project.

I insert the Map as described in the documentation and for a first moment it worked.
Now this is the result:

I don't know what to do.

export const Container = styled.div`
  flex: 0 0 100%;
  max-width: 100%;
  height: 250px;
`

<Container>
        <Map
          style={{ width: '100%', height: '100%' }}
          scrollWheelZoom={false}
          center={centerPosition} zoom={9}>
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
            url='https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
          />
          {positions.length && <Polyline positions={positions} />}
          <Marker icon={myIcon} key='lastPosition' position={lastPosition}>
            <Popup>
              <span>Popup</span>
            </Popup>
          </Marker>
        </Map>
      </Container>

HELP.

[INGCRENGIFO]

Hello, how did you solve it?

[fborghi]

I solved adding the leaflet.css file to my react component that uses the map.

[devrchancay]

import "leaflet/dist/leaflet.css"