set color to Reactsrap Navlink

Question

I would like to set color "white" to my react component (Navlink). Home and logs link are always dark :( The white color is never set. I use Reacstrap, Bootstap 4. I separate js with css Here my code :

Sidebar.js

import React from 'react';
import { NavLink as RouterNavLink } from 'react-router-dom';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink 
} from 'reactstrap';
import './Sidebar.css';

export default class Sidebar extends React.Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
  collapsed: true
};
}
toggleNavbar() {
this.setState({
  collapsed: !this.state.collapsed
});
}
render() {
return (
  <div className="sidebar">
     <Navbar color="faded" light>
      <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
      <NavbarBrand href="/" className="mr-auto"></NavbarBrand>
<Collapse isOpen={!this.state.collapsed} navbar>
        <Nav navbar>
          <NavItem>
            <NavLink tag={RouterNavLink} to="/"className="test">Home</NavLink>
          </NavItem>
          <NavItem>
            <NavLink tag={RouterNavLink} to="/logs">Logs</NavLink>
          </NavItem>
        </Nav>
      </Collapse>
    </Navbar>
  </div>
);
}
}

and Sidebar.css

.sidebar {
display: flex;
flex-direction: column;
background:  #29363d;
width: 200px;
height: 844px;
}
.test {
font-family: sans-serif;
color: #fff;
}

in your Sidebar.css file, change `.test` to `a.test`, navbar and navlink related components from bootstrap have their own coloring assigned to `a`; also, check your console to see where the ruleset assigning the dark color to your links. — Napoli, Mar 09 '18 at 22:34
I try ```a.test .navbar .navlink{ font-family: sans-serif; color: #fff; }``` but the color is still dark — Vana, Mar 10 '18 at 09:27

Ula · Accepted Answer · 2018-06-28T11:11:14.580

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

This page on NavLink shows both ways of doing it:

Using className

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 !

score 4 · Answer 2 · answered May 26 '18 at 18:37

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.

score 0 · Answer 3 · answered Mar 12 '18 at 13:11

0

The ruleset you want to override bootstrap's default coloring is as follows

.navbar .navbar-nav>li>a, .navbar .navbar-nav>li>a:hover {
   color: #fff;
}

answered Mar 12 '18 at 13:11

Napoli

1,389
2
15
26

@Vana you'll need to provide a screen-shot of the rule being over-written in your dev console, only then can you see what rule will supersede the current. – Napoli Mar 13 '18 at 20:00

score 0 · Answer 4 · answered Jul 13 '20 at 18:05

I had similar problem. I solved this issue using this:

<Navbar fixed="top" expand="md" style={{ backgroundColor: "#233" }}>

be sure you don't use light/dark. It prevents customization.

<NavLink className="inactive">

then adding the css:

.inactive {
    color: #fff;
}

.inactive:hover {
    color: #fed136;
}

score 0 · Answer 5 · answered Feb 02 '21 at 07:00

0

For white text color

Change your dark props to white

For example

            <Navbar color='success' dark expand='md' fixed='top'>

answered Feb 02 '21 at 07:00

Ashad Nasim

2,511
21
37

set color to Reactsrap Navlink

5 Answers5