CODEWITHSUNDEEP
cssreactjsreact-router
Jon Nicholson
Jon Nicholson

Reputation: 1161

Using both a className and activeClassName on NavLink

I'm attempting to build a component which contains dynamic NavLinks that change their styling depending upon whether they are active or not.

However, I want some default styling if they aren't active.

At the moment when I'm trying to do it, the 'className' overwrites the activeClassName and so I can't do the dynamic styling like I was hoping to with how I was writing the CSS.

Is there a way for me to set the className and then overwrite it with the active class when needed?

To demonstrate what I mean, here's a screenshot of the selectors at the moment:

enter image description here

And this is what I'm aiming to go for:

enter image description here

So that the styling changes depending upon whether it's 'active'.

And here's my code:

<NavLink className="dashboard-selector" activeClassName="active-selector" to="/dashboard">Ongoing</NavLink>
<NavLink className="dashboard-selector" activeClassName="active-selector" to="/completed">Completed</NavLink>

And my CSS:

.active-selector {
    height: 36px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #f9f9f9;
    color: #363636;
    font-weight: bold;
}

.dashboard-selector {
    height: 36px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #999;
    color: #f9f9f9;
    font-weight: bold;
}

Upvotes: 0

Views: 1299

Answers (4)

Amila Senadheera
Amila Senadheera

Reputation: 13265

You need to add exact to NavLink

<NavLink exact className="dashboard-selector" activeClassName="active-selector" to="/dashboard">Ongoing</NavLink>
<NavLink exact className="dashboard-selector" activeClassName="active-selector" to="/completed">Completed</NavLink>

This way it will reflect the current URL instead of visited URLs

Upvotes: 0

David
David

Reputation: 200

The css overwrites the styling not the className.

If you place the .dashboard-selector before the .active-selector the .active-selector will overwrite the .dashboard-selector.

.dashboard-selector {
   height: 36px;
   width: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   background-color: #999;
   color: #f9f9f9;
   font-weight: bold;
}


.active-selector {
   background-color: #f9f9f9;
   color: #363636;
   font-weight: bold;
}

Upvotes: 1

Elvaleryn
Elvaleryn

Reputation: 351

You need add exact to NavLink like
<NavLink className="dashboard-selector" activeClassName="active-selector" exact to="/dashboard">Ongoing</NavLink>

exact is a property which ensures activeClassName only triggers on url paths that match your location exactly.

Upvotes: 0

Priyank Kachhela
Priyank Kachhela

Reputation: 2635

  1. I think you just need to write active-selector style below dashboard-selector

.dashboard-selector {
    height: 36px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #999;
    color: #f9f9f9;
    font-weight: bold;
}

.active-selector {
    height: 36px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #f9f9f9;
    color: #363636;
    font-weight: bold;
}
  1. If this does not work then try to use important in your css styling
.active-selector {
    height: 36px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #f9f9f9 !important;
    color: #363636 !important;
    font-weight: bold;
}

Upvotes: 1

Related Questions