javascriptcssreactjsfrontendreact-bootstrap

How to change the color of one of my 5 tabs in react-bootstrap?


<Tabs defaultActiveKey="recent" >
  <Tab eventKey="recent" title="Recent">
  </Tab>
  <Tab eventKey="popular" title="Popular">
  </Tab>
  <Tab eventKey="all" title="All">
  </Tab>
  <Tab eventKey="category" title="Category">
  </Tab>
  <Tab eventKey="myconversation" title="My Conversation" >
  </Tab>
</Tabs>

I have five tabs in one of the component, I want to change the font color of only one tab 'My Conversation'. I tried adding a class both to the parent as well as child but it is not changing the color. Please suggest any solution.


Solution

  • You need to add tabClassname to <Tab /> component, like this:

    <Tab tabClassName="color-red" eventKey="profile" title="Profile">
      Tab Profile content
    </Tab>
    

    and a bit of CSS Styling:

    .color-red {
      color: red;
    }
    
    .nav-tabs .nav-item.show .nav-link, 
    .nav-tabs .nav-link.active.color-red {
      color: green;
    }