set color to Reactsrap Navlink

There are two ways of doing it ( if someone else needs it ):

This page on NavLink shows both ways of doing it:

Above page defines followings:

'className' should define default (not currently active) NavLink's style in CSS;

'activeClassName' defines active page's NavLink CSS style.

So in your code

<NavLink to="/" className="inactive" activeClassName="active" exact={true}>Dashboard</NavLink>

then in CSS ( it did not work for me in any other CSS file except _base.scss - so if it does not work try it in _base.scss)

.inactive {
    color: #fff;
    text-decoration: none;
}

.active {
    color: red;
    text-decoration: none;
  }

(Note: See for example this Codepen.IO example prepared by someone else)

Using 'style' and 'activeStyle':

<NavLink to="/" style={{color: 'white', textDecoration: 'none'}} activeStyle={{color: 'red', textDecoration: 'none'}}>Home</NavLink>

Hope it helps someone !

I think the issue may be the 'light' property in:

<Navbar color="faded" light>

Seems to override the CSS configuration. I found removing 'light' solved a similar issue for me.

The alternative is to use an inline style in the node level tags:

<NavLink style={{color: 'white'}}  ...etc.

... but that gets very repetitive.

Related