UncontrolledTooltip ReactStrap border over icon

Question

I'm using reactstrap and UncontrolledTooltip with a Mdi Icon.

When I hover the tooltip, it works fine, but I get a border each time I click on the icon (I don't want that border to appear at all.

Sandbox:

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

try this it should solve your problem

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