改变antd组件样式的方法

实际项目中大家经常会引入antd进行项目开发，对于如何更改antd组件的样式应该也是很多朋友都关心的，笔者今天就给大家分享一下笔者知道的方法：

一：用CSS覆盖掉antd原有的样式：

这是更改tooltip的方法，在控制台找到tooltip的类名，然后在对应的css部分更改它的样式。
tooltip的left与top的值如果你想要更改的话是要加权重的在left与top后面加上!important，只是正常的写left与top的话是没有用的。
：global模块保证了其中定义的所有样式的名字都不会被修改

二： 使用antd组件自带的API：

比如Tooltip这个组件，我们可以看到在它的API上面自带了overlayStyle。可以通过此API拓展Tooltip的样式。

参数是一个object,那么我们就可以这么来改变Tooltip的样式：

<Tooltip
  placement="rightTop"
  title='Tooltip'
  // 将tooltip的背景色改成了orange色
  overlayStyle={{backgroundColor: 'orange'}}	
>
//你自己的组件
</Tooltip>

三：给组件加其他的类名

（适用场景，改变antd某组件的样式在某位置显示不同效果，不影响该组件在其他地方正常显示为antd的样式）

<Tooltip
  placement="rightTop"
  title='Tooltip'
  overlayClassName={this.state.expand ? 'expandTooltip' : 'packUpTooltip'}
>
>//你自己的组件
</Tooltip>

此时就可以根据Tooltip就可以根据this.state.expand的状态来看是加expandTooltip类名还是packUpTooltip类名了，在你的css样式里就可以写这俩个类名的样式了。如果要更改tooltip组件的left和top属性要在后面加上!important哦，否则是无法覆盖掉的，其他组件请在开发过程中自行探测。