Warning: Prop `dangerouslySetInnerHTML` did not match.

Hey!

This code,

   <ReactTooltip
      effect="solid"
      place="bottom"
      delayShow={200}
      arrowColor="transparent"
      backgroundColor="#1d2c3e"
      id="newApp"
   >
      <h1 className="text-sm text-white font-medium">Upload</h1>
   </ReactTooltip>

Seems to be giving me this:

I’ve tried to use <p> tags instead of <h1> and so on, but I can’t seem to get rid of it. I do indeed have custom CSS on it, and it looks like this:

.__react_component_tooltip {
  border-radius: 5px !important;
  border: 1px solid #273552 !important;
  background: #404f6d !important;
  padding: 10px 15px !important;
  color: #b7c4dc !important;
  z-index: 100 !important;
}

[LeonSkrilec]

I was having same problems with Next.js. I just imported component dynamically, with SSR disabled and it works.

import dynamic from "next/dynamic";

const ReactTooltip = dynamic(() => import("react-tooltip"), {
  ssr: false,
});

[lipgartdmitriy]

This solution helped me. https://stackoverflow.com/questions/64079321/react-tooltip-and-next-js-ssr-issue