title: react-leaflet doesn't appear after adding css
body: <p>I have a map component inside rc-tabs component</p>
  
  <pre><code>import React from "react";
  import {Map as LeafMap, TileLayer, Marker, Popup} from "react-leaflet";
  
  const Map = () =&gt; {
  
      return (
          &lt;div className="leaflet-appearance"&gt;
              &lt;LeafMap center={[59.95, 30.33]} zoom={11}&gt;
                  &lt;TileLayer
                      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  /&gt;
                  &lt;Marker position={[59.95, 30.33]}&gt;
                      &lt;Popup&gt;
                          A pretty CSS3 popup. &lt;br/&gt; Easily customizable.
                      &lt;/Popup&gt;
                  &lt;/Marker&gt;
              &lt;/LeafMap&gt;
          &lt;/div&gt;
      )
  };
  
  export default Map
  </code></pre>
  
  <p>And it is rendered. Not well - some tiles are not loaded the size differs on zoom but it is visible.
  the pic of somehow working react-leaflet:
    <img src="https://i.stack.imgur.com/Wp07G.png" /></p>
  
  <p>I want to fix it. I add a css into my index.html file</p>
  
  <pre><code>&lt;!-- Leaflet Maps Styling  --&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /&gt;
  &lt;script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and set a width in Map.css</p>
  
  <pre><code>.leaflet-appearance {
      height: 200px;
      width: 200px;
  }
  </code></pre>
  
  <p>leaflet doesn't work:
  <img src="https://i.stack.imgur.com/zr1nm.png" /></p>
  
  <p>How can I fix it? </p>