这里是你可以抓住这一点。我已经重写了你的应用程序组件，并添加了一个className={selectedDropdown === "Dropdown2" ? "selected" : ""}下拉和设置为下拉状态！

import { Stack, Form, Button, Alert, Nav, Navbar, Container, NavDropdown, Offcanvas } from "react-bootstrap"
import { useState, useEffect, useRef } from 'react'

export default function App() {

  const [val, setVal] = useState("");
 // here adding a new state to keep track of which dropdown is selected
  const [selectedDropdown, setSelectedDropdown] = useState(""); 

  return (
    <div style={{ padding: "15px" }}>

      <h1>Example</h1>

      <Navbar bg="dark" className="my-2" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <NavDropdown
              title="Dropdown1"
              id={`offcanvasNavbarDropdown-expand-sm}`}
              className={selectedDropdown === "Dropdown1" ? "selected" : ""} 
              onSelect={() => setSelectedDropdown("Dropdown1")} 
            >
              <NavDropdown.Item onClick={() => setVal("1_1 Small")}>1_1 Small</NavDropdown.Item>
              <NavDropdown.Item onClick={() => setVal("1_1 Medium")}>1_2 Medium</NavDropdown.Item>
              <NavDropdown.Item onClick={() => setVal("1_1 Large")}>1_3 Large</NavDropdown.Item>

            </NavDropdown>

            <NavDropdown
              title="Dropdown2"
              id={`offcanvasNavbarDropdown-expand-sm}`}
              className={selectedDropdown === "Dropdown2" ? "selected" : ""} 
              onSelect={() => setSelectedDropdown("Dropdown2")} 
            >
              <NavDropdown.Item onClick={() => setVal("2_1 Small")}>2_1 Small</NavDropdown.Item>
              <NavDropdown.Item onClick={() => setVal("2_2 Medium")}>2_2 Medium</NavDropdown.Item>
              <NavDropdown.Item onClick={() => setVal("2_3 Large")}>2_3 Large</NavDropdown.Item>
              <NavDropdown.Item onClick={() => setVal("2_4 ExtraLarge")}>2_4 Extra Large</NavDropdown.Item>
            </NavDropdown>
          </Nav>

        </Container>
      </Navbar>

      <div className="p-2 mx-auto">
        <h3>Value Selected : {val}</h3>
      </div>

      <br />
    </div>
  )
}

现在你可以添加到你的CSS和检查它应该工作，只改变颜色为黄色。

.selected > .nav-link {
  color: yellow !important;
}

如果这不起作用，请告诉我！