Реагировать activeClassName не применяя стили - PullRequest
Новая
       52

Реагировать activeClassName не применяя стили

0 голосов
/ 29 января 2020

Я пытаюсь стилизовать мою панель навигации, чтобы под активной ссылкой была белая линия solid. Я пытаюсь сделать это с помощью activeClassName. 

<Navbar className="navbar-expand-sm navbar-toggleable-sm" light>
                <Container id="ContainerGrnH">
            <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
                    <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
            <div class="topnav">
              <ul className="navbar-nav flex-grow">
                                <li>
                                    <NavLink tag={Link} to="/home" className="text-white" activeClassName="underline" activeStyle={{borderBottom: '2px solid white'}}>HOME<div className="underline"></div></NavLink>
                                    </li>
                                <li>
                                    <NavLink tag={Link} className="text-white"  activeClassName="underline" to="/people-profiles">PEOPLE PROFILES<div className="underline"></div></NavLink>
                                </li>
                                <li>
                    <NavLink tag={Link} className="text-white"  activeClassName="underline" to="/Role-types">ROLE TYPES<div className="underline"></div></NavLink>
                                </li>
                                <li>
                    <NavLink tag={Link} className="text-white"  activeClassName="underline" to="/support">SUPPORT<div className="underline"></div></NavLink>
                                </li>
                                <li>
                    <NavLink tag={Link} className="text-white"  activeClassName="underline"id="contactushead" to="/contact-us">CONTACT US<div className="underline"></div></NavLink>
                                </li>
                </ul>
                </div>
            </Collapse>
          </Container>
            </Navbar>

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

html {
}

@media (min-width: 768px) {
    html {
    }
}

.navbar {
    width: 100%;
    overflow: hidden;
    padding: 0px;
}
.topnav ul a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px;
    transition: color 0.5s;
}
.topnav ul li .underline {
    height: 3px;
    background-color: transparent;
    width: 0%;
    transition: width 0.2s, background-color 0.5s;
    margin: 0 auto;
}
.topnav ul>.underline {
    border-bottom-width: 2px;
    width: 100%;
    background-color: white;
}

.topnav ul li.active-link .underline {
    width: 100%;
    background-color: white;
}

.topnav ul li:hover .underline {
    background-color: white;
    width: 100%;
}

.topnav ul li:hover a {
}

.topnav ul li:active a {
    transition: none;
    color: rgba(255,255,255,0.76);
}

.topnav ul li:active .underline {
    transition: none;
    background-color: rgba(255,255,255,0.76);
}
.topnav > ul > NavItem > li > a.underline {
    color: red;
}
.underline {
    border-bottom-width: 2px;
    width: 100%;
    background-color: white;
}

Я также пытался использовать activestyle, чтобы добавить стили к активной ссылке, но, похоже, это тоже не работает. Буду признателен за любые предложения или идеи по этому вопросу.

Версии реагирующих плагинов.

React-router-dom 4.2.2 React 16.0.0 responsestrap 6.3.0

...