Tooltip styling disappears when using a CustomTooltip

[aesakof]

I first came across this when implementing my own CustomToooltip, but I think this might actually be a recharts bug, as even the codesandbox example from the documentation site has the same issue. If you remove 'content={< CustomTooltip />}' from line 110 on that codesandbox, you'll turn the tooltip into a basic one, which will look like this:

But when you put that piece back in so that it's what the documentation has as an example for a CustomTooltip, the background (for lack of a better term) of the tooltip disappears.

Does anyone know if this is a recharts bug, or maybe I'm just doing something wrong? I just want to get my Custom Tooltip to have the same visual look as the basic one

[aesakof]

Figured it out. When providing your own content to a tooltip component, the base styling that recharts does is omitted, so you have to pass in some basic styles in the wrapperStyle prop, like so:

<Tooltip 
        content={<CustomTooltip />}
        wrapperStyle={{ backgroundColor: "white", borderStyle: "ridge", paddingLeft: "10px", paddingRight: "10px" }}
/>

Hopefully this can help someone with the same issue in the future, and maybe that example on the recharts site/codesandbox should add a wrapperStyle prop?