代码之家 › 专栏 › 技术社区 › Wasif

如何更改ant工具提示组件的文本颜色和背景颜色

antd css html

Wasif · 技术社区 · 6 年前

我实现了antd工具提示,但需要更改其背景颜色和文本颜色,但我无法实现这一点。我试着使用antd工具提示组件提供的“OverlyStyle”,但没能按预期工作。如下图所示。

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

我试着检查它,但无法做到,因为它的工作在悬停,直到我把光标移到课堂上,但没有帮助。

我在hover上建立的div添加了一个名为“ant tooltip open”的类,但在这个类中我看不到它是什么。

0 回复 | 直到 4 年前

Rahul 6 年前

您可以很容易地做到这一点,请参阅下面的代码

.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

mehdi geran 4 年前

我希望这对你有用。要更改ant工具提示箭头的颜色,请使用:

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

WoO 4 年前

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

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

推荐文章

Franva · 如何使用Webpack 3配置Ant设计

7 年前

enzeberg · 在Ant Design中,如何将图标垂直居中?

7 年前

Emo · 导入Ant设计组件无效

7 年前

ThePainnn · 由第三方(antd)样式覆盖的样式化组件

7 年前

Michael Fernandes · 垂直菜单蚂蚁设计高度100%

7 年前

Thijs Koerselman · 如何包装组件并继承其props接口

7 年前

willywonka15 · 如何禁用react中的子菜单项?

7 年前

Thijs Koerselman · Ant Design antd与antd mobile用于非本地移动web开发

7 年前

Yichz · 包装Antd组件

7 年前

Avery235 · rc时间选择器在移动设备上未正确显示

7 年前