如何在react组件中将hover附加到svg上

Question

目前我有图例，它显示矩形下方的文本，但我希望仅当我将鼠标悬停在矩形上时才显示文本。我尝试使用鼠标悬停和 css 悬停，但似乎没有任何效果。当我单击而不是悬停时，也会调用 mouseOver 事件。

我读了一些帖子，其中提出了这样的建议：

svg text {display: none;}
svg g:hover text {display: block;}

但目前我已经用 React 编写了这种格式的代码，那么如何将鼠标悬停到 g ？

我在下面分享了我的部分代码：

// creating svg
selectedLegend
.append("svg")
.attr("viewBox", `0 0 ${count} 1`)
.attr("preserveAspectRatio", "none")

function legend(g: any) {
// appending data
g.selectAll("g.legendCells")
.data(itemColor)
.enter()
.append("rect");
// appending text for label, which is not working as expected
g.selectAll("g")
.style("background-color", "grey")
.append("text")
.attr("class", "breakLabels")
.style("font-size", "0.4")
.attr("x", function (d: any, i: any) {
return i + "." + 25
})
.attr("y", 1.5)
.text(function (d: Record<string, unknown>, i: any) {
})
}

我尝试在 svg 和 rect 上添加这样的内容，但没有工作

.on("mouseover", function (e: any) {
// tried with this also
//select(e.target).style("display", "block")
})

小提琴： https://jsfiddle.net/s6f7z3p4/3/

注意：

<style>
svg text {display: none;}
svg g:hover text {display: block;}
</style>

如果我在小提琴中添加上面的样式，它工作正常，但是我如何在中使用上面的样式我的反应组件，因为它不支持样式标签。我在添加 :hover 到 svg(g) 时遇到问题，因为它不能作为样式添加，也不能作为 attr 添加