在react-simple-map中防止蓝色路径矩形

Question

所以我使用react-simple-maps来制作世界地图，但当我单击地图时，默认行为是该国家周围的一个蓝色矩形。我试着在onClick上使用preventDefault()，但这并不能摆脱它。有没有人有办法解决这个问题？

这是我的代码。谢谢你的帮助！

import React, { Component } from "react"
import {
  ComposableMap,
  ZoomableGlobe,
  Geographies,
  Geography
} from "react-simple-maps"
import { Motion, spring } from "react-motion"

const mapStyles = {
  width: "90%",
  height: "auto"
}

class Map extends Component { 
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(geography, evt) {
    evt.preventDefault()
}
  render() {
    return (
        <div>
    <Motion
      defaultStyle={{
        x: this.props.center[0],
        y: this.props.center[1]
      }}
      style={{
        x: spring(this.props.center[0]),
        y: spring(this.props.center[1])
      }}
    >
      {({ x, y }) => (
        <ComposableMap
          width={500}
          height={500}
          projection="orthographic"
          projectionConfig={{ scale: 120 }}
          style={mapStyles}
        >
          <ZoomableGlobe center={[x, y]}>
            <circle
              cx={250}
              cy={250}
              r={120}
              fill="transparent"
              stroke="#CFD8DC"
            />

            <Geographies
              disableOptimization
              geography="https://gist.githubusercontent.com/GordyD/49654901b07cb764c34f/raw/27eff6687f677c984a11f25977adaa4b9332a2a9/countries-and-states.json"
            >
              {(geos, proj) =>
                geos.map((geo, i) => (
                  <Geography
                    key={geo.id + i}
                    geography={geo}
                    projection={proj}
                    style={{
                      default: { fill: "#CFD8DC" }
                    }}
                    onClick={this.handleClick}
                  />
                ))
              }
            </Geographies>
          </ZoomableGlobe>
        </ComposableMap>
      )}
    </Motion>
  </div>
      )
  }
}

​

​

Answer 1

在Geography组件上设置以下样式将删除所有交互组件上的边框：

style={{
    default: {
        outline: 'none'
    },
    hover: {
        outline: 'none'
    },
    pressed: {
        outline: 'none'
    }
}}

Answer 2

尝试将CSS规则添加到您正在单击的元素：

outline: none;

请注意，这个大纲并不总是坏事，因为它有助于键盘导航。