1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ant react修改tooltip的组件样式

ant react修改tooltip的组件样式

时间:2020-11-17 08:22:34

相关推荐

ant react修改tooltip的组件样式

先看效果:

原样式

修改后样式

1、业务场景

如上图,有的时候根据业务需要,一定要修改一下tooltip的背景色或者样式,就需要用到以下代码来修改了。

.ant-tooltip-inner是文字框的背景色,.ant-tooltip-arrow-content是文字框下面的小三角形,如果不需要三角形,display none就好了。我们可以利用原生的改出来一些我们想要的效果。

2、全局改的css样式

写在global.less里的

.ant-tooltip-inner {color: #fff;background-color: var(--ant-primary-color);box-shadow: 0 3px 6px -4px var(--ant-primary-color);}.ant-tooltip-arrow-content {--antd-arrow-background-color: var(--ant-primary-color) !important;}

3、非全局修改

在tootip里添加overlayClassName即可单独为当前元素添加类而不影响全局样式。

写在global.less里的

4、tooltip改造

有了可以为tooltip添加类名的机会,那里面的内容就很好规划了,自定义的设计都可以实现出来。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。