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

Question

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

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

我尝试检查它但无法这样做，因为它在悬停时工作，直到我将光标移到类里面但没有帮助。

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

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