动态更改反应引导工具提示颜色

Question

我试图在反应引导工具提示中更改工具提示背景颜色。

从这篇文章中，它可以在 css 文件中更改。但是我有可能显示 40 种不同的颜色。

我一直在尝试这样做：

<Tooltip id={this.props.name} style={{".tooltip_inner":{"background":backgroundColor}}}>{this.props.name}</Tooltip>

但这不起作用。我无法在渲染中设置 tooltip_inner 并且我不确定如何动态访问它。我试过 getElementsBy-Name 但这也不起作用。

感谢您的任何帮助。

Answer 1

好的，已经这样做了，看看是否对您有帮助。尽管如此，这不是一种非常反应（y）的方式。

return (
    <OverlayTrigger placement="top" overlay={this.tooltip} onEntering={this.entering}>
                    <Button">Hover on me</Button>
    </OverlayTrigger>
);

tooltip = (
    <Tooltip id="tooltip"><strong>This is the tooltip. Yeah!</Tooltip>
);

// Set your color here
entering = (e) => {
    e.children[0].style.borderTopColor = 'green';
    e.children[1].style.backgroundColor = 'green';
};