Remove the underline from a Link in React

# Remove the underline from a Link in React

Use inline styles to remove the underline of a Link in React.

When the text-decoration property is set to none, the underline of the link is removed.

App.js

Copied!
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <div>
        <Link style={{textDecoration: 'none'}} to="/">
          Home
        </Link>

        <br />

        <a style={{textDecoration: 'none'}} href="google.com" target="_blank">
          Google.com
        </a>
      </div>
    </Router>
  );
}

remove link underline

The code for this article is available on GitHub

We used inline styles to set the text-decoration property of the Link to none which removes the Link's underline.

Notice that multi-word properties are camelCased when specified as inline styles.

The first set of curly braces in the inline style marks the beginning of an expression and the second set of curly braces is the object containing styles and values.

You can use the same approach to remove the underline of an anchor element because under the hood the Link component is really just an <a> tag.

App.js

Copied!
<a style={{textDecoration: 'none'}} href="google.com" target="_blank">
  Google.com
</a>

Make sure to set the text-decoration property to none on the Link element and not on its children.

If you need to change the color of a link, check out the following article.

# Remove the underline from all Links using global CSS

An alternative solution is to remove the underline from all links by adding a global style in a CSS file.

App.css

Copied!
a {
  text-decoration: none;
}

Now, all we have to do is import the App.css file for the style to be applied.

App.js

Copied!
import {BrowserRouter as Router, Link} from 'react-router-dom';

// 👇️ Import your CSS file
import './App.css';

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>

        <br />

        <a href="google.com" target="_blank">
          Google.com
        </a>
      </div>
    </Router>
  );
}

remove the underline from all links using global css

The code for this article is available on GitHub

This removes the underline of all links on the page without having to use the text-decoration property on each link.

This approach also works when using third-party libraries that provide wrapper components for links. As long as the library uses an a tag, the link's underline will be removed.

It's a best practice to import your global CSS files in your index.js file because then they wouldn't only get loaded when a certain component is mounted.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Remove the underline from a Link in React

# Remove the underline from a Link in React

# Remove the underline from all Links using global CSS

Borislav Hadzhiev