React Leaflet多边形在Chrome中点击时出现边框描边问题求助

这是Chrome浏览器的默认行为——当元素获得焦点时，会自动添加outline描边样式。Leaflet的多边形属于可交互元素，点击后会成为焦点元素，触发了这个默认样式。

解决办法有这几种：

• 全局统一移除：在项目的CSS文件中添加以下代码，覆盖所有Leaflet可交互元素的焦点样式：

.leaflet-interactive:focus {
  outline: none !important;
}

.leaflet-interactive是Leaflet给所有可点击元素（包括多边形、标记点等）统一添加的类，用这个选择器能精准修改样式。

• 单个多边形单独设置：如果不想全局修改，也可以给特定多边形组件直接指定样式：

<Polygon
  positions={yourPolygonPositions}
  style={{ outline: 'none' }}
/>

或者自定义CSS类后绑定到组件：

.no-focus-outline:focus {
  outline: none;
}

<Polygon
  positions={yourPolygonPositions}
  className="no-focus-outline"
/>

• 兼顾无障碍性的替代方案：如果需要保留键盘导航的焦点提示（去掉outline会影响键盘用户操作），可以自定义一个不突兀的焦点样式：

.leaflet-interactive:focus {
  outline: 2px solid rgba(0, 123, 255, 0.5);
  outline-offset: 2px;
}

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