UncontrolledTooltip ReactStrap 边框在图标上答案

【问题标题】：UncontrolledTooltip ReactStrap border over iconUncontrolledTooltip ReactStrap 边框在图标上
【发布时间】：2021-06-22 05:50:27
【问题描述】：

我正在使用带有 Mdi 图标的 reactstrap 和 UncontrolledTooltip。

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

沙盒：

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>
  );
}

【问题讨论】：

标签： javascript reactjs material-ui react-bootstrap reactstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

svg:focus {
  outline: none;
}

现场演示

【讨论】：