react-leaflet中Map Marker图标显示异常及自定义CSS不生效问题求助

核心原因：Leaflet原生默认图标是基于静态路径配置的，React项目的打包工具（Webpack/Vite等）会处理静态资源路径，导致默认图标资源无法被正确加载，这就是你不设置icon时只显示阴影/空白矩形的根本原因。而你手动配置时使用的iconSize、iconAnchor参数和官方默认值不匹配，才会出现图标压缩变形的问题。

正确配置步骤：

1. 导入所有默认图标相关的静态资源，除了常规图标外还要导入视网膜屏适配图标和阴影图标

import markerIcon from 'leaflet/dist/images/marker-icon.png';
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png';

2. 按Leaflet官方默认参数配置图标

const defaultMarkerIcon = L.icon({
  iconUrl: markerIcon,
  iconRetinaUrl: markerIcon2x,
  shadowUrl: markerShadow,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

3. 将配置好的defaultMarkerIcon传给Marker组件的icon属性即可得到完全原生的默认标记效果。

如果希望全局生效，不需要每个Marker都传icon属性，可以在导入Leaflet后添加以下代码覆盖默认配置：

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: markerIcon2x,
  iconUrl: markerIcon,
  shadowUrl: markerShadow,
});

你代码中所有绑定类名的属性都写成了小写的classname，React规范中绑定元素类名必须使用驼峰写法className，小写写法不会被识别为HTML的class属性，所以你写的App-header样式完全没有绑定到对应元素上，和MapContainer无关。

MapContainer默认只会作用于自身和内部的Leaflet地图元素，不会影响外部元素的样式。你只需要把所有classname替换为className即可解决自定义样式不生效的问题，另外建议给MapContainer设置明确的高度避免地图显示异常，可在App.css中添加：

#mapid {
  height: 80vh;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者Ruben99