如何在react-svg-map中用不同颜色高亮世界地图上的国家

我正在做一个项目，需要在世界地图上高亮特定国家。用的是react-svg-map库的CheckboxSVGMap组件，默认所有国家显示浅蓝色，我想把指定的高亮国家改成深蓝色。库的文档里有多种颜色的示例，但没给配套代码。我试着加了selectedLocationIds属性，但不知道怎么在这个场景下用。

当前使用的代码：

import { CheckboxSVGMap } from "react-svg-map";

<CheckboxSVGMap
  map={world}
  className="h-[350px] w-full map-class"
  onLocationMouseMove={onLocationHover}
  onLocationMouseOut={() => setSelectedCountry(null)}
/>

当前效果：所有国家均为浅蓝色，没有高亮区分。
目标效果：仅两种颜色，指定国家显示深蓝色，其余保持浅蓝色。

1. 正确使用selectedLocationIds属性 #

这个属性用来指定需要高亮的国家，接受一个国家ID数组，这些ID必须和你导入的world地图数据里的国家ID一致（比如中国是'CN'，美国是'US'）。可以用useState维护这个数组，方便动态更新高亮范围。

2. 自定义高亮样式 #

默认选中的高亮颜色不符合需求，需要通过CSS覆盖组件默认样式。CheckboxSVGMap中选中的国家会自带rsm-check-location--checked类，直接给这个类设置填充色即可。

完整示例代码 #

import { useState } from "react";
import { CheckboxSVGMap } from "react-svg-map";
import world from "react-svg-map/lib/maps/world";

// 初始高亮的国家ID数组
const DEFAULT_HIGHLIGHTED = ["CN", "US", "GB"];

export default function WorldMap() {
  const [highlightedCountries, setHighlightedCountries] = useState(DEFAULT_HIGHLIGHTED);

  return (
    <>
      <CheckboxSVGMap
        map={world}
        className="h-[350px] w-full map-class"
        selectedLocationIds={highlightedCountries}
        onLocationMouseMove={onLocationHover}
        onLocationMouseOut={() => setSelectedCountry(null)}
      />
      {/* 自定义样式 */}
      <style jsx>{`
        /* 高亮国家的深蓝色 */
        .rsm-check-location--checked {
          fill: #003399;
        }
        /* 未选中国家的浅蓝色 */
        .rsm-check-location {
          fill: #cce5ff;
        }
      `}</style>
    </>
  );
}

注意事项 #

• 确认world地图数据的导入路径正确，不同版本的库可能路径略有差异
• 若要动态切换高亮国家，直接更新highlightedCountries数组即可
• 颜色值可根据需求替换为十六进制、RGB或CSS颜色名称

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