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

Question

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

from this post它可以在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'; 
};