在react-simple-maps中防止藍色路徑矩形

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;

請注意，此大綱並不總是壞事，因為它有助於鍵盤導航