How to get rid of underline for Link component of React Router?

Question

I have the following:

How do I get rid of the blue underline? The code is below:

Answer 1

If you are using 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} />;

Answer 2

There is the nuclear approach which is in your App.css (or counterpart)

a{
  text-decoration: none;
}

which prevents underline for all <a> tags which is the root cause of this problem

Answer 3

a:-webkit-any-link {
  text-decoration: none;
  color: inherit;
}

Answer 4

<Link to="/page">
    <Box sx={{ display: 'inline-block' }}>
        <PLink variant="primary">Page</PLink>
    </Box>
</Link>

In some cases when using another component inside the Gatsby <Link> component, adding a div with display: 'inline-block' around the inner component, prevents underlining (of 'Page' in the example).

Answer 5

You can add style={{ textDecoration: 'none' }} in your Link component to remove the underline. You can also add more css in the style block e.g. style={{ textDecoration: 'none', color: 'white' }}.

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1> 

Answer 6

If someone is looking for material-ui's Link component. Just add the property underline and set it to none

<Link underline="none">...</Link>