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">

activeClassName不会更改活动链接的颜色

1 个答案: