How to remove the text decoration of React Link?

Question

I am using React and react-router-doms Link component to navigate between pages.

But I am struggling with removing the text-decoration in the component.

React:

<Link className="nav-link" to="/page">LINK</Link>

CSS:

.nav-link  {
    text-decoration: none;
}

This CSS does not seem to work, but when I replace the Link to a a component it works fine.

<a className="nav-link" href="/page">LINK</a>

Anyone has an idea how to remove the text-decoration from a Link component?

Answer 1

If react-router is less than v4

Try inline style

<Link to="first" style={{ textDecoration: 'none' }}>
  Link
</Link>

If you want to use styled-components, you could do something like this:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';


const StyledLink = styled(Link)`
    text-decoration: none;

    &:focus, &:hover, &:visited, &:link, &:active {
        text-decoration: none;
    }
`;

export default (props) => <StyledLink {...props} />;

OR

You can do it with NavLink in react-router v4

 <NavLink
   className="tags"
   activeStyle={{ color: 'red' }}
   to={'/page'}
 >
   LINK
 </NavLink>