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添加类名的机会，那里面的内容就很好规划了，自定义的设计都可以实现出来。