React-Leaflet 地图渲染错乱（如瓦片偏移、空白或重复图块）通常因缺失 Leaflet 样式文件所致；只需在使用地图的组件中显式引入 leaflet/dist/leaflet.css 即可解决。

react-leaflet 地图渲染错乱（如瓦片偏移、空白或重复图块）通常因缺失 leaflet 样式文件所致；只需在使用地图的组件中显式引入 `leaflet/dist/leaflet.css` 即可解决。

在基于 React-Leaflet 构建地图组件时，一个常见但容易被忽略的关键点是：Leaflet 的 CSS 样式文件不会随 JavaScript 包自动加载。即使 react-leaflet 和 leaflet 依赖已正确安装，若未手动引入其样式表，地图容器将失去关键布局规则（如 .leaflet-container 的尺寸控制、图层定位、瓦片过渡等），导致出现你截图中所示的异常效果——例如地图碎片化、图块错位、缩放失效或完全空白。

要彻底解决该问题，请在 GeographyChart 组件顶部添加以下 CSS 导入语句：

import "leaflet/dist/leaflet.css"; // ✅ 必须添加：提供地图容器、图层、控件等核心样式
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

⚠️ 注意事项：

react-modernization

将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新

下载

• 导入位置很重要：必须在 react-leaflet 组件导入之前或同级位置引入 CSS（推荐放在最上方），确保样式在组件渲染前生效；
• 避免重复导入：全局仅需一次引入（如在 App.tsx 或 index.tsx 中导入亦可），但为保障组件可移植性，建议在实际使用地图的组件内导入；
• 检查样式优先级：若项目中存在重置样式（如 normalize.css 或 MUI 全局样式），可能覆盖 .leaflet-container 的 height: 100%，此时需确保父容器具有明确高度（你当前 <div style="{{" width: height:> 是合理做法，但需确认其父元素（如 <code>Box）也设置了 height 或 minHeight）；
• 额外优化建议：MapContainer 不再支持 width/height props（已废弃），应完全依赖 CSS 控制尺寸。可改写为：

<div style={{ width: "100%", height: "500px", borderRadius: "8px", overflow: "hidden" }}>
  <MapContainer
    center={position}
    zoom={15}
    style={{ height: "100%", width: "100%" }} // ✅ 使用 style 替代 width/height props
  >
    <TileLayer
      attribution="&copy; OpenStreetMap contributors"
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    {isDashboard && (
      <Marker position={position}>
        <Popup>
          <p>Это Лондон</p>
        </Popup>
      </Marker>
    )}
  </MapContainer>
</div>

最后，请确保 leaflet 已作为对等依赖安装（react-leaflet@v4+ 要求 leaflet@^1.9.0）：

npm install leaflet
# 或
yarn add leaflet

完成上述修改后，重新启动开发服务器，地图即可正常渲染——图块对齐、缩放平滑、标记交互可用。这是 React-Leaflet 集成中最基础也最关键的配置步骤。