Styling links in react

Question

I am trying to figure out how to style links in react.

I've seen this post and tried most of it's suggestions.

I have defined a footer styling class as:

.footerlinks {
    a:link {color: $Hand3};
    font-weight: 300;
    font-family: $secondary-font;
    a:link {text-decoration:none; background-color:transparent; color: #FAF5F2;};
    a:visited {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    a:hover {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    a:active {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    color: $Hand3;
}

Then, I have a footer link as:

<Link to={'/about'} className="footerlinks">About</Link>

The 'color' css field applies, but none of the a tag links work. When you hover on a link it turns blue underline. The css inspector shows the webkit a styling has been misapplied, except for the pointer.

What's the trick to styling a tags in react?

score 0 · Accepted Answer · answered May 10 '19 at 02:26

0

It should work the same as with regular HTML and CSS. Assuming you are using react-router or similar, Link should generate an a tag.

I think the problem is where you have put the class. The CSS is expecting a component with the class footerlinks followed by an a element inside.

Try changing your code to:

<div className="footerlinks">
  <Link to={'/about'}>About</Link>
</div>

answered May 10 '19 at 02:26

braza

4,260
1
26
36

Thanks! I tried a million versions of this, but not that one – Mel May 10 '19 at 02:39

score 0 · Answer 2 · answered Jul 22 '19 at 15:42

If you directly want to apply css on react links, you have another option that is

You can use <NavLink> instead of <Link>

<NavLink 
   className="CssClassForNormalLinks" 
   activeClassName={location.pathname !== "your pathname"? null : "CssClassForActiveLinks"}
   to="/home"
   >
   HOME
</NavLink>

Styling links in react

2 Answers2