activeClassName 不改变活动链接颜色

Question

我有一个由 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" 但没有任何变化。

Answer 1

试试这个形状

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

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

<NavLink  activeClassName="classname">