activeClassName 不改变活动链接颜色

Posted 2023-03-23

【中文标题】activeClassName 不改变活动链接颜色

【英文标题】：activeClassName not changing active link color

【发布时间】：2020-06-28 23:33:09

【问题描述】：

我有一个由 reactstrap 制成的简单导航栏组件。

这是我的代码：

<Container fluid>

          <div className='sample'>
            <Navbar color="light" bg="primary" light expand="md" >

              <Collapse isOpen=!collapsed navbar>
                <Nav className="ml-auto" navbar>
                  <NavItem>
                    <Link href="/dashboard">
                      <NavLink href="/dashboard" active=Router.pathname === "/dashboard">Dashboard</NavLink>
                    </Link>
                  </NavItem>              
                </Nav>
              </Collapse>
            </Navbar>
            props.children

          </div>


          <style jsx>`

         .sample 
           background-color: red;
          // padding: 100px
         

         .nav-link > ul > li > a.active 
          color:red;
        

        .navbar-nav .nav-link.active
          color:red;
        

       `</style>
        </Container>

我正在尝试在链接处于活动状态时更改活动链接/突出显示颜色。 我也尝试使用 activeClassName="active" 但没有任何变化。

【参考方案1】：

试试这个形状

`<NavLink
  to="/dashboard"
active=Router.pathname === "/dashboard"
  activeStyle=
   what you wannt//
 fontWeight: "bold",
    color: "red"
  
>
  Dashboard
</NavLink>`

或添加 activeClassName="class_name" 像这个形状

<NavLink  activeClassName="classname">