Ant Design 修改tab文本字体大小,tabBarStyle样式不生效

react 专栏收录该内容
1 篇文章 0 订阅

 

1. 如果你进来这篇文章,想必也被这个问题折磨好几天了。现在我把我解决的思路记下来,也与你分享!

一开始,我找到了一个属性tabBarStyle,死活不生效,甚至大刀阔斧升级版本到2.13.13(原来是2.5.3,不敢升到3.x,担心不兼容),也没有什么卵用。

后来,实在没招,我想我换个组件吧,用了react-tabs ,算是基本解决问题了,但又碰到事件绑定不对的新问题。正当我愁眉不展时,我发现我原来在某个tab上面加过一个icon(加一个icon-new用来提示用户这是新功能) ,我突然在心中有句MMP ,但是我不能对自己说,汗~

 

2. 废话不多说了,上解决方案,我们注意到Tabs.TabPane的类型支持string|ReactNode ,所以你get到重点了么?

对,就是ReactNode!!!

<TabPane tab={<span style={{fontSize:18}}><Icon type="question-circle-o" />Tab1</span>} key="1">
	tab内容
</TabPane>

 

 

当然,你也可以到官方看看这个tabBarStyle不生效的issue ,我在上面贴了这个解决方法,这算是跳出定式思维,另辟蹊径吧,署名是napoleonjk

 

 

https://github.com/ant-design/ant-design/issues/8773

如果大家有更好的解决方案,记得在评论区留言,也告诉我一下。不留言,点个赞再走也可以的!如果实在帮到你了,我也不介意亮出我的支付宝二维码,你懂得!

如果还有问题,可以向我提问:

向我提问

  • 1
    点赞
  • 2
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值