实际项目中大家经常会引入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哦，否则是无法覆盖掉的，其他组件请在开发过程中自行探测。
标签：样式,top,tooltip,组件,antd,类名 来源： https://blog.51cto.com/u_15275953/2924541
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。