更改下拉标题的字体颜色

Question

我正在使用 react-bootstrap NavBar 组件，我正在玩 NavDropdown 这只是导航栏中的下拉菜单。

在我的页面中，我有 2 个下拉菜单，如图所示。

我想要的是，如果我从 Dropdown2 中选择任何值，则下拉标题

Dropdown2

将其字体颜色从白色更改为黄色。但是 Dropdown1 保持不变。

同样，如果我从

Dropdown1

中选择任何值，同样的事情也会发生。

我如何使用 CSS 做到这一点？

在这里找到实时工作代码

这是代码

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("");

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

Answer 1

这里是你如何抓住这个。我已经重写了你的 App 组件，并在下拉列表中添加了一个

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

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