html - 如何改变ant-tooltip组件的文字颜色和背景颜色

Question

我实现了 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' 的类，但我看不到类中的内容。

标签： htmlcssreactjsantd

Answer 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