CODEWITHSUNDEEP
reactjsantd
Ben
Ben

Reputation: 131

How I can change the color of the text of Ant Design TabPane?

I use a Tabs with some TabPane in my code but the text stay always in Blue, I want to change it to grey. I try several things but none fuction.

I try:

this for apply the text color with the parent:

<Tabs style={{ height: "fit-content",font: "#363636" }}  >

and 

<Tabs style={{ height: "fit-content",color: "#363636" }}  >

this for each the children :

<TabPane tab={t("tabPanelGeneral/name")} key="1" style={{ color: "#363636" }}>

and 

<TabPane tab={t("tabPanelGeneral/name")} key="1" style={{ font: "#363636" }}>

Upvotes: 3

Views: 21704

Answers (6)

Anuran Barman
Anuran Barman

Reputation: 129

@osama's answers works good but I wanted to change the bottom bar color also where his answer was not working.

Below code is working if you want to change the border color:

.ant-tabs-ink-bar {
    border-bottom: 1px solid #ae9572;
}

Upvotes: 0

Tajudeen Abdulgafar
Tajudeen Abdulgafar

Reputation: 21

You can set

.ant-tabs-ink-bar {
   background: none;
}

And use a custom-tab

.custom-tab{
   height : fit-content;
   color:#363636;
}

Upvotes: 2

Osama Bin Saleem
Osama Bin Saleem

Reputation: 899

Putting it here if someone still needs it You can use tabBarStyle prop to add custom css. source

To change the color of the active tab, You need to update color of the button:

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
   color: #363636 !important; 
   font-weight: 500;
}

To change the color of the blue bottom bar:

.ant-tabs-ink-bar {
   position: absolute;
   background: #000000;
   pointer-events: none;
}

Upvotes: 12

Amit Kadivar
Amit Kadivar

Reputation: 818

if you change the color of the tab text then put CSS like this

demo codesandbox link you view demo 

.ant-tabs-tab {
  color: #363636 !important;
}

.ant-tabs-tab-active {
  color: #363636 !important;
}

Upvotes: 5

Eslam Abu Hugair
Eslam Abu Hugair

Reputation: 1208

you simply can add classNames to your components and add their styles on your style sheet : 

<Tabs className="custom-tab"  >

and the style sheet :

.custom-tab{
   height : fit-content;
   color:#363636;
}

Upvotes: -1

user11910739
user11910739

Reputation:

You can apply css for your active tab.

.ant-tabs-nav .ant-tabs-tab-active {
   color: '#363636';
}

Upvotes: 0

Related Questions