如何以编程方式模糊反应引导程序导航链接？

Question

我试图在点击后模糊导航链接。我的工作流程是 navlink 打开一个模态，在模态关闭后，navlink 保持聚焦（黑色 css）。如您所知，模糊的导航链接显示为灰色。

我试过：

document.getElementById(idName).blur()

&&

ref.current.blur()

。这两个都不起作用。我是否必须声明自定义颜色然后操作类名才能实现这一点，或者是否有更简单的方法来做到这一点？

谢谢

function App() {
  const aboutLinkRef =  useRef(null);
  const navLinks= {
    ABOUT: 'ABOUT',
    LOGIN: 'LOGIN'
  }
  const [aboutModalShowState, setAboutModalShowState] = useState(false);

  const navLinkClicked = (value) => {
    if (value) {
      if (value===navLinks.ABOUT) {
        setAboutModalShowState(true);
      }
    }
  }

  const hideAboutModal = () => {
    setAboutModalShowState(false);
    document.getElementById('aboutNavLink').blur(); // does not work, 
    aboutLinkRef.current.blur(); // also does not work

  }

  return (
    <div className="App">
      <Modal show={aboutModalShowState} onHide={()=> hideAboutModal()}>
        <Modal.Header>
          <Modal.Title>About title</Modal.Title>
        </Modal.Header>
        <Modal.Body>About description</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={()=> hideAboutModal()}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>

      <Navbar collapseOnSelect expand="lg" bg="light" variant="light">
        <Container>
          
          <Navbar.Brand href ="/">TITLE</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto">
            </Nav>
            <Nav>
              <Nav.Link id='aboutNavLink' ref={aboutLinkRef} onClick={()=>navLinkClicked(navLinks.ABOUT)}>About</Nav.Link>
              <Nav.Link id='loginNavLink'>Login</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
}

export default App;