How to switch css class for active tab of react-bootstrap?

Question

I am trying to add custom styling to the active tab but don't know how to switch the styling class for the active tab.

Following is my code:

import React, { useState } from "react";
import "./styles.css";
import { Container, Row, Col, Tab, Nav } from "react-bootstrap";

export default function App() {
  const [key, setKey] = useState("first");

  const ActiveStyle = {
    textAlign: "center",
    background: "white",
    borderRadius: "2em",
    padding: " 0.3em 1.5em",
    letterSpacing: "0.2em"
  };

  const inActiveStyle = {
    ...ActiveStyle,
    background: "transparent",
    "border-color": "transparent",
    color: "inherit"
  };

  return (
    <div className="App">
      <Container style={{ width: "auto" }}>
        <Tab.Container activeKey={key} onSelect={key => setKey(key)}>
          <Row style={{ padding: "1em 1em", background: "#EEEEEE" }}>
            <Col>
              <Nav.Link
                eventKey="first"
                style={key === "first" ? ActiveStyle : inActiveStyle}
              >
                <span style={{ fontSize: "larger" }}>Q&A </span>
              </Nav.Link>
            </Col>
            <Col>
              <Nav.Link
                eventKey="second"
                style={key === "second" ? ActiveStyle : inActiveStyle}
              >
                <span>Exams</span>
              </Nav.Link>
            </Col>
          </Row>

          <Tab.Content>
            <Tab.Pane eventKey="first">
              <Row style={{ height: "90vh" }}>
                <p>TAB 1</p>
              </Row>
            </Tab.Pane>
            <Tab.Pane eventKey="second">
              <Row style={{ height: "90vh" }}>
                <p>TAB 2</p>
              </Row>
            </Tab.Pane>
          </Tab.Content>
        </Tab.Container>
      </Container>
    </div>
  );
}

And sandbox link: https://codesandbox.io/s/stupefied-galois-f46s3

Dear @GauravKumar, Please write your question code, I clicked on the codesandbox link and see everything is ok because you changed the link based on the answer and if the other user have the same issue, they cannot understand this current post. I leave a downvote if you fix your question post I will change it to upvote. 🌹 — AmerllicA
– AmerllicA, Commented Feb 4, 2020 at 6:47

Tripurari Shankar · Accepted Answer · 2020-01-30 10:07:08Z

9

+100

you can use a state to identify active tab like this ( you can refactor it to suit your need )

recommended reading material is controlled/uncontrolled component https://reactjs.org/docs/forms.html#controlled-components

import React, { useState } from "react";
import "./styles.css";
import { Container, Row, Col, Tab, Nav } from "react-bootstrap";
export default function App() {
  const [key, setKey] = useState('first');
  const ActiveStyle = {
    textAlign: "center",
    background: "white",
    borderRadius: "2em",
    padding: " 0.3em 1.5em",
    letterSpacing: "0.2em"
  };
  const inActiveStyle = {
    ...ActiveStyle,
    background: 'transparent',
    'border-color': 'transparent',
    'color': 'inherit'
  };
  return (
    <div className="App">
      <Container style={{ width: "auto" }}>
        <Tab.Container activeKey={key} onSelect={key => setKey(key)}>
          <Row style={{ padding: "1em 1em", background: "#EEEEEE" }}>
            <Col>
              <Nav.Link
                eventKey="first"
                style={ key === 'first' ? ActiveStyle : inActiveStyle}
              >
                <span style={{ fontSize: "larger" }}>Q&A </span>
              </Nav.Link>
            </Col>
            <Col>
              <Nav.Link eventKey="second" style={ key === 'second' ? ActiveStyle : inActiveStyle}>
                <span>
                  Exams
                </span>
              </Nav.Link>
            </Col>
          </Row>

          <Tab.Content>
            <Tab.Pane eventKey="first">
              <Row style={{ height: "90vh" }}>
                <p>TAB 1</p>
              </Row>
            </Tab.Pane>
            <Tab.Pane eventKey="second">
              <Row style={{ height: "90vh" }}>
                <p>TAB 2</p>
              </Row>
            </Tab.Pane>
          </Tab.Content>
        </Tab.Container>
      </Container>
    </div>
  );
}

edited Jan 30, 2020 at 10:07

answered Jan 30, 2020 at 9:35

Tripurari Shankar

3,6082 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Gaurav Kumar Over a year ago

it doesn't work as clean as expected. There is an alignment issue of non-selected tab occurring

Tripurari Shankar Over a year ago

for that you can use some styling for non active element so that it does not re-position

AmerllicA Over a year ago

The exactly right answer. but when I see the style on the ReactJS component instead of using className I get sick.

Tripurari Shankar Over a year ago

@AmerllicA same here i never use style but because i edited his source code thats why its there

Tripurari Shankar Over a year ago

@AmerllicA when I was answering the question i kept my preference aside instead I tried to answer with minimum changes ( keep the context ) once OP understands the concept he can modify it according to his need and thanks for the upvote 👍

|

grenade · Accepted Answer · 2020-08-21 08:44:11Z

0

if you're using bootstrap or react-bootstrap you just need a css directive in your css file. eg:

a.nav-item.nav-link.active span {
  /* hot pink, bold text for active tab title */
  color: #ff3399;
  font-weight: bolder;
}

answered Aug 21, 2020 at 8:44

grenade

32.3k24 gold badges104 silver badges129 bronze badges

Collectives™ on Stack Overflow

How to switch css class for active tab of react-bootstrap?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related