如何去除react-simple-maps中选中州区域时出现的默认边框？

这个边框是<Geography>组件默认的交互状态描边，以及浏览器默认的focus轮廓共同导致的，可通过以下两种方式解决：

• 方案1：直接在组件内配置状态样式
  react-simple-maps的<Geography>组件原生支持配置不同交互状态的样式，直接将选中/hover/聚焦状态的描边和轮廓设为透明即可，修改代码如下：

<Geographies geography={geoUrl}>
  {({ geographies }) =>
    geographies.map(geo => (
      <Geography 
        key={geo.rsmKey} 
        geography={geo}
        style={{
          default: {
            fill: "rgb(185,185,185)",
            outline: "none",
            stroke: "transparent"
          },
          hover: {
            fill: "rgb(185,185,185)", // 不需要hover变色就保持和default一致
            outline: "none",
            stroke: "transparent"
          },
          pressed: {
            fill: "rgb(185,185,185)",
            outline: "none",
            stroke: "transparent"
          },
          focused: {
            fill: "rgb(185,185,185)",
            outline: "none",
            stroke: "transparent"
          }
        }}
      />
    ))
  }
</Geographies>

注：你之前在<Geographies>标签上设置的style={{backgroundColor:'green', bottom:100}}是无效配置，svg地理区域的样式统一在<Geography>的style属性中设置即可。

• 方案2：全局CSS覆盖兜底
  如果组件配置不生效，可以在全局样式文件中添加如下规则，强制移除轮廓和多余描边：

.rsm-geography {
  outline: none !important;
}
/* 如果需要保留默认描边，只移除选中状态的边框可以用下面的规则 */
/*
.rsm-geography:focus, .rsm-geography:active, .rsm-geography:hover {
  outline: none !important;
  stroke: transparent !important;
}
*/

内容的提问来源于stack exchange，提问作者Jose A.