Explain Codes LogoExplain Codes Logo

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

javascript
react-router
css-in-js
styled-components
Anton ShumikhinbyAnton Shumikhin·Jan 1, 2025
TLDR

Clear the underlining effect of the <Link> component by configuring textDecoration to none:

<Link to="/your-path" style={{ textDecoration: 'none' }}>Your Link</Link>

Or make use of a CSS class:

.no-underline { textDecoration: none; }
<Link to="/your-path" className="no-underline">Your Link</Link>

Immediate changes: inline style or CSS classes?

For a quick and direct approach to remove the underline, make use of inline styles:

<Link to="/destination" style={{ textDecoration: 'none', color: 'inherit' }}>Inlaid Styles</Link>

It's like stealing the underline's car parking space; it's got nowhere to go!

You can also create custom CSS classes for broader usability:

.distinct-style { textDecoration: 'none'; color: 'hotpink'; /* Because who doesn't love hot pink, eh? */ }

Apply the class to your <Link>:

<Link to="/destination" className="distinct-style">Link Styled with CSS Class</Link>

In this case, you're setting up a "no parking" sign, essentially telling underline to find another spot!

Styled components: the cool kid on the block

For more complex styling requirements, styled components would be your go-to solution. They provide CSS-in-JS approach, allowing you to maintain cleaner code without sacrificing style flexibility:

import styled from 'styled-components'; import { Link } from 'react-router-dom'; // This is "Operation Underline Freedom", I repeat "Operation Underline Freedom" const StyleLink = styled(Link)({ textDecoration: 'none', color: 'rebeccapurple', // To honor the great Rebecca ':hover': { textDecoration: 'underline', }, }); <StyleLink to="/styled-path">Styled Link</StyleLink>

Baking the Material-UI cake with React Router

While working with Material-UI, you can seamlessly integrate React Router with Material-UI components by deploying the component prop - much like adding a cherry on the cake!

import { Button } from '@material-ui/core'; import { Link } from 'react-router-dom'; <Button component={Link} to="/materialized-path" style={{ textDecoration: 'none' }} // Because underlines are so 1999 > Material-UI Link </Button>

Heritance power play

For a lean approach, inherit styles from the parent class. Less code, same result – code efficiency at its best:

.link-master { color: 'inherit'; textDecoration: 'inherit'; }

Remember to point your <Link> to the right direction:

<Link to="/based-on-parent" className="link-master">Inherited Style Link</Link>

Keeping all states in check

Make sure to handle different states such as :hover, :active, and :visited to ensure the underline does not peek back:

.state-full { textDecoration: 'none'; } .state-full:hover, .state-full:active, .state-full:visited { textDecoration: 'none'; }

For a dynamically themed application, integrate style updates within the component logic. You can pass styles dynamically using inline styles:

// Assume styleTheme comes from global state <Link to="/dynamic" style={{ textDecoration: styleTheme.textDecoration }}>Dynamic Styled Link</Link>