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

rur96b6h 于 2023-03-22 发布在 React

关注(0)|答案(4)|浏览(444)

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

reactjs

来源：https://stackoverflow.com/questions/55760245/how-to-change-the-text-color-and-background-color-of-ant-tooltip-component

4条答案

按热度按时间

odopli941#

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

.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

赞(0）回复(0）举报 2023-03-22

bgtovc5b2#

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

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

赞(0）回复(0）举报 2023-03-22

gc0ot86w3#

要更改箭头的颜色**，请使用此**：

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

赞(0）回复(0）举报 2023-03-22

xghobddn4#

对于正在寻找主题设置解决方案的人，可以使用colorTextLightSolid标记在主题上设置工具提示的颜色

赞(0）回复(0）举报 2023-03-22