图标上的 UncontrolledTooltip ReactStrap 边框

Question

我正在使用 reactstrap 和 UncontrolledTooltip 以及 Mdi 图标。

当我将鼠标悬停在工具提示上时，它工作正常，但每次我单击该图标时都会出现一个边框（我根本不希望出现该边框。

沙盒：

import "./styles.css";
import { UncontrolledTooltip } from "reactstrap";

import MagnifyMinusOutline from "mdi-react/MagnifyMinusOutlineIcon";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <MagnifyMinusOutline
        id="ZoomMinusIcon"
        className="viewIcon MinusIcon"
        size={32}
        onClick={() => console.log("click")}
      />
      <UncontrolledTooltip
        autohide={true}
        placement="bottom"
        target="ZoomMinusIcon"
      >
        {" "}
        Zoom Out{" "}
      </UncontrolledTooltip>
    </div>
  );
}

Answer 1

这是 svg 元素的轮廓。您可以通过在 css

中将其设置为 none 来禁用

svg:focus {
  outline: none;
}

现场演示

Answer 2

试试这个应该可以解决你的问题

`<MagnifyMinusOutline
        id="ZoomMinusIcon"
        className="viewIcon MinusIcon"
        size={32}
        onClick={() => console.log("click")}
        style={{"outline":"none"}}
      />`