如何更改ant-tooltip组件的文字颜色和背景颜色答案

【问题标题】：How to change the text color and background color of ant-tooltip component如何更改ant-tooltip组件的文字颜色和背景颜色
【发布时间】：2019-09-09 15:07:37
【问题描述】：

我实现了 antd 工具提示，但需要更改它的背景颜色和文本颜色，但我无法实现。我尝试使用 antd tooltip 组件提供的“overlayStyle”，但没有按预期工作。如下图。

<Tooltip
    title={jobNumber * 3}
    placement="bottomRight"
    overlayStyle={{
        color: "orange",
        background: "blue",
    }}
>
    <div style={{ maxWidth: `${jobNumber * 3}px` }} />
</Tooltip>;

我尝试检查它，但无法检查它，因为它在悬停时工作，直到我将光标移动到课堂但没有帮助。

我在悬停时创建的 div 添加了一个名为“ant-tooltip-open”的类，但我看不到类中的内容。

【问题讨论】：

能否请您为此添加一个 jsfiddle，以便我检查...
你可以从这个链接看到的例子ant.design/components/tooltip/#header

标签： html css reactjs antd

【解决方案1】：

你可以很容易地做到这一点，见下面的代码

.ant-tooltip-inner {
    color: yellow;
    background-color: green;
}

.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
    border-bottom-color: green;
}

这是工作演示https://codepen.io/anon/pen/JVvyGr

【讨论】：

您能否将您的答案更新为背景颜色为#f2f4f5，颜色为#003471。问题是，在浅色背景下，三角形没有得到那种浅色。
那个三角形也变成了那种浅色，你可以通过将身体的背景颜色改为深色来看到它，它可能无法正常显示，因为它没有像工具提示那样的阴影，即使你试图给三角形添加阴影，它看起来像正方形，所以最好使用不同的颜色
它不适用于箭头，但使用 : .ant-tooltip-arrow::before { background-color: white; } 它修复了箭头颜色

【解决方案2】：

为了改变箭头的颜色使用这个：

.ant-tooltip-arrow-content{
    background-color: #fafafa !important;
}

因为即使更改工具提示的背景颜色，它仍然保持黑色，而且显然这行代码在 Chrome 中对我不起作用：

.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
        border-bottom-color: green;
    }

【讨论】：

【解决方案3】：

我希望这对你有用。为了改变蚂蚁工具提示箭头的颜色，使用：

.ant-tooltip-arrow::before{
        background-color: white;
    }

【讨论】：