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

【问题标题】：change react bootstrap tooltip color dynamically动态更改反应引导工具提示颜色
【发布时间】：2017-07-31 21:39:43
【问题描述】：

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

从 post 可以在 css 文件中更改它。不过，我可能有 40 种不同的颜色可供显示。

我一直在尝试这样做：

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

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

感谢您的帮助。

【问题讨论】：

标签： reactjs dynamic colors tooltip react-bootstrap

【解决方案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';
};

【讨论】：

【解决方案2】：

.tooltip > div.tooltip-inner {
  background-color: @accentColor !important;
  color: @whiteColor !important;
}

.tooltip.show {
  opacity: 1 !important;
}

.tooltip > div.arrow::before {
  border-bottom-color: @accentColor !important;
  color: @whiteColor !important;
}

&lt;html&gt;&lt;/html&gt;

【讨论】：