how can I react-bootstrap change the color of the tabs

Question

I want to change the color of the tabs used in react-bootstrap. but when I change the style it goes for the content and not the tabs. How can I do it.

Answer 1

Specify a class on the <Tabs className="myClass"> component. To modify the color of the tabs your CSS is going to look a little hacky but I haven't found a better way to do this:

.myClass ul > li > a {
    background-color: gray;
    color: white;
}

You will notice that this does not cover hover and inactive states so there is a little bit more work for you to do, but this should be enough to head you in the right direction.

Working example at CodePen

Answer 2

In react-bootstrap v4 the Tab component has a property called tabClassName (https://react-bootstrap-v4.netlify.app/components/tabs/#tab-props). With its help you cann pass in a class and define CSS which will override the default classes:

# in css file:

.coloredTab {
  background-color: red;
}

# in jsx file:
<Tab ... tabClassName={classes.coloredTab} />

Didn't check the newest v5 though. Might even got better.

Answer 3

In React-Bootstrap V5 What worked for me is the CSS code below without specifying any className on the <Tabs> element.

.nav-tabs .nav-link {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.nav-tabs .nav-link.active {
  border-bottom: solid 4px white !important;
}