question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

“tabs component" tabBarStyle set 'font-size' can't work

See original GitHub issue

Version

2.13.11

Environment

mac 10.13.2(macos high sierra)and safari \chrome

Reproduction link

https://ant.design/components/tabs-cn/

Steps to reproduce

https://ant.design/components/tabs-cn/ ` <Tabs defaultActiveKey=“1” onChange={callback} tabBarStyle={{fontSize: 22, ‘font-size’: ‘22px’}}>

<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>

<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>

<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>

</Tabs>

`

tabs components can’t work because

&-nav-container { at line 32 set "font-size: @tabs-title-font-size;",

What is expected?

cat set font-size effect tabbar font-size

What is actually happening?

can’t

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
napoleonjkcommented, Apr 23, 2018

It bothered me for a few days!Finally I found a good solution , now I will share with you.

<TabPane tab={<span style={{fontSize:18}}>Tab1</span>} key="1">
	tab内容
</TabPane>

You can also put an icon in the span tag like below:

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

If you can speak Chinese ,you can visit my CSDN blog [https://blog.csdn.net/jiangkai528/article/details/80052201]

0reactions
zhuoqinyuecommented, Jun 21, 2021

我想去掉tab的下划线 image

你好, 請問這個效果你做到了嗎? 我也對這個沒辦法

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to change fontSize of labels of the TabBar in react ...
I found that you can use "tabBarIcon" with any component and make it's a text =) <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ......
Read more >
Custom Bottom Tab Navigator in React Native - YouTube
In this tutorial, you'll learn how to create a custom bottom tab navigator in react native. I have created this custom designed bottom...
Read more >
Change editor font size | JetBrains Rider Documentation
Press Ctrl+Alt+S to open the IDE settings and select Keymap. Use the search box to find Increase font size, Decrease font size, and...
Read more >
How to Create a Custom Tab Bar in React Native - Crowdbotics
In this post, we're going to create a custom tab bar using the React Navigation library bottom tabs component. We'll start by building...
Read more >
TabNavigator reference - React Navigation
tabBarComponent - Component to use as the tab bar, e.g. TabBarBottom (this is the ... which overrides the paths set in the routeConfigs....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found