activeClassName не меняет цвет активной ссылки - PullRequest
Новая
       33

activeClassName не меняет цвет активной ссылки

0 голосов
/ 17 марта 2020

У меня есть простой компонент navbar, созданный из реактивной ленты.

Вот мой код: 

<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 Ответ

0 голосов
/ 19 марта 2020

попробуйте эту форму 

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

или добавьте activeClassName = "class_name" в качестве этой формы 

<NavLink  activeClassName="classname">
...