Change default color of Link from blue to white

Question

I am using Link component from react-router-link which applies blue color css to the text just like an anchor tag does. I want to change this to white, how can I do that?

onHover I want to change it to blue.

Bringingup

Answer 1

Since Link get's transpiled to an <a>, you can use css to style all <a> and change all links color to white:

a {
  color: #FFF;
}
a:hover {
   color: #00F
}

Or add a .link class to each Link:

<Link to="/" className="link" />

...

.link {
  color: #FFF;
}
.link:hover {
   color: #00F
}

Edit: You can also pass in an inline style. You can't pass :hover rules inline though:

<Link to="/" style={{ color: '#FFF' }} />

Pam

Answer 2

.makeaclassandaddittothelinktag { color: white; }

You should be able to do that, or just add a class to the link tag if you don't want all of them to change color.

Fimbriate

Answer 3

As a plus for the previous replies, remember you can always use !important in case styles look like are not being applied for a however reason.

Austenite

Answer 4

Simply wrap the Link text in a span element and style as you wish using css.

<Link to='/about'>
    <span className='about-link-text'>
        About
    </span>
</Link>

your-style.css:

.about-link-text {
    font-size: 16px;
    color: white;
}

Embattled