Recharts CustomTooltip 失去背景不透明度

Question

我第一次遇到这个问题是在实现我自己的 CustomTooltip 时，但我认为这实际上可能是一个 recharts 错误，因为即使 codesandbox 示例 也存在同样的问题。如果删除 'content={< CustomTooltip />}' 从该codesandbox上的第110行开始，您将把工具提示变成基本工具提示，如下所示：

但是当你把那块放回去时这就是文档中作为 CustomTooltip 示例的内容，工具提示的背景（由于缺乏更好的术语）消失了。

有谁知道这是否是重新图表错误，或者也许我只是做错了什么？我只是想让我的自定义工具提示具有与基本工具提示相同的视觉外观

Answer 1

我想通了。正如 rahuuzz 所说，为工具提示提供自定义内容也会覆盖基本样式，因此必须提供。我的图表中的工具提示现在看起来像这样：

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

基本上只需添加带有一些基本样式的wrappedStyle 道具。希望这可以帮助其他人将来进行谷歌搜索

Answer 2

在您的codesandbox中，您正在导入styles.css，但它不包含custom-tooltip类的任何样式。

当您为工具提示提供自定义内容时，您必须自己定义样式。当省略 content 属性时，包会在内部将样式设置为工具提示。