Reactjs 动态更改react引导工具提示颜色

我正在尝试更改react引导工具提示中的工具提示背景色

由此，可以在css文件中对其进行更改。然而，我有一个可能不同的颜色显示

我一直试图这样做：

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

但它就是不起作用。我无法在render中设置工具提示，我不知道如何动态访问它。我试过用名字来命名getElementsBy，但也不起作用

---

谢谢您的帮助。

好的，这样做吧，看看是否对您有帮助。不过，这不是一种非常反复无常的做法

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';
};

---

好的，这样做，看看这是否对你有帮助。不过，这不是一种非常反复无常的做法

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';
};

.tooltip>div.tooltip-internal{ 背景色：@accentColor！重要； 颜色：@whiteColor！重要； } .tooltip.show{ 不透明度：1！重要； } .tooltip>div.arrow:：before{ 边框底色：@accentColor！重要； 颜色：@whiteColor！重要； } .tooltip>div.tooltip-internal{ 背景色：@accentColor！重要； 颜色：@whiteColor！重要； } .tooltip.show{ 不透明度：1！重要； } .tooltip>div.arrow:：before{ 边框底色：@accentColor！重要； 颜色：@whiteColor！重要； }