How to remove NavLink styling for unselected Routes-CodePudding

I would like to know how to restore to the default style of NavLink as marked in the screenshot below. The color should be white and without the underlines. You would find my code below the screenshot: Home is the default path that is currently selected. The activeClass property on this is working as it should.

The code:

const NavBar = () => {
    return(
        <div className="navBar">
            <div className="logo">LOGO</div>
            <div className="navOptions">
                <ul>
                    <li>
                        <NavLink exact activeClassName="activeClass" to="/">Home</NavLink>
                    </li>
                    <li>
                        <NavLink exact activeClassName="activeClass" to="/advanceFilter">Advanced Search</NavLink>
                    </li>
                    <li>
                        <NavLink exact activeClassName="activeClass" to="viewAll">View All</NavLink>
                    </li>
                    <li>Logout</li>
                </ul>
            </div>
        </div>
    );
}

export default NavBar;

The CSS:

.navBar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: white;
    font-weight: bold;
}

.logo {
    display: flex;
    flex: 1;
    align-items: center;
    padding-left: 50px;
}

.navOptions {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

//The li items don't have the color and text-decoration properties on them
li {
    display: inline;
    margin-right: 20px;
    cursor: pointer;
    height: 100%;
    text-decoration: none;
    color: white;
}

li:hover {
    background-color: gray;
}

ul {
    margin-right: 40px;
    list-style-type: none;
}

.activeClass {
    text-decoration: none;
    color: purple;
}

CodePudding user response：

The NavLink component renders an anchor <a /> tag, update the selector in your CSS to also target anchor tags that are children of li elements.

li, li a {
  display: inline;
  margin-right: 20px;
  cursor: pointer;
  height: 100%;
  text-decoration: none;
  color: white;
}

Alternatively you could also specify a "navlink" class and apply default non-active CSS styling there.