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

试试这个，它应该能解决你的问题

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

Answer 2

它是svg元素的轮廓。您可以通过在css中将其设置为none来禁用

svg:focus {
  outline: none;
}

实时演示

​

​