如何为 react-bootstrap 的活动选项卡切换 css 类？

Question

我正在尝试向活动选项卡添加自定义样式，但不知道如何切换活动选项卡的样式类。

以下是我的代码：

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

和沙箱链接：https : //codesandbox.io/s/stupefied-galois-f46s3

Answer 1

您可以使用状态来识别这样的活动选项卡（您可以重构它以满足您的需要）

推荐阅读材料是受控/非受控组件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>
  );
}