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

Answer 1

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

Answer 2

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