ant react修改tooltip的组件样式

先看效果： 

 1、业务场景

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

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

2、全局改的css样式

写在global.less里的

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

3、非全局修改

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

写在global.less里的

 4、tooltip改造

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

这篇好文章是转载于：学新通技术网