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.

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' }} />

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.

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.

Answer 4

 <Link to="/" style={{ color: 'white' }}>
        Click me
  </Link>

In this example, the style attribute is applied to the Link component, and the color property is set to 'white'. This will change the default color of the link text to white.