Search code examples
cssreactjsreduxreact-routerreact-router-redux

Change default color of Link from blue to white

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.

Solution

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