Remove the underline of a Link in React

avatar

Borislav Hadzhiev

Tue Apr 19 20222 min read

Remove the underline of a Link in React #

Use inline styles to remove the underline of a Link in React, e.g. <Link style={{textDecoration: 'none'}} to="/">. When the text decoration property is set to none, the underline of the link is removed.

App.js
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

We used inline styles to set the text-decoration property to 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.

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

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

App.css
a { text-decoration: none; }

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

App.js
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> ); }

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 get 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 certain component is mounted.

Use the search field on my Home Page to filter through my more than 1,000 articles.