CODEWITHSUNDEEP
reactjsreact-bootstrap
Zeeshan
Zeeshan

Reputation: 105

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

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.

Upvotes: 8

Views: 14843

Answers (3)

Kareem Abbas
Kareem Abbas

Reputation: 99

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;
}

Upvotes: 4

Igor Gonak
Igor Gonak

Reputation: 2250

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.

Upvotes: 1

Todd Chaffee
Todd Chaffee

Reputation: 6824

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

Upvotes: 9

Related Questions