UncontrolledTooltip ReactStrap 边框在图标上

Posted 2023-03-23

【中文标题】UncontrolledTooltip ReactStrap 边框在图标上

【英文标题】：UncontrolledTooltip ReactStrap border over icon

【发布时间】：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>
  );

【参考方案1】：

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

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

【参考方案2】：

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

svg:focus 
  outline: none;

现场演示