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:

<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>

The MenuItem component is from http://www.material-ui.com/#/components/menu

put `textDecoration: 'none'` on the `` component not its children. — azium, Jun 07 '16 at 04:31

score 371 · Answer 1 · edited Dec 24 '22 at 09:24

371

I see you're using inline styles. textDecoration: 'none' is used in child, where in fact it should be used inside <Link> as such:

<Link to="first" style={{ textDecoration: 'none' }}>
  <MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>

<Link> will essentially return a standard <a> tag, which is why we apply textDecoration rule there.

edited Dec 24 '22 at 09:24

starball

20,030
7
43
238

answered Jun 07 '16 at 04:53

Grgur

7,092
2
19
34

9

there a way to set global with textdecoration none ? in the app.css ? – stackdave Oct 08 '17 at 15:08
5

It works :). Be aware that if you copy paste the style to your .css (because, of course, you don't like inline styles) then is `text-decoration: none;` – David Torres Feb 17 '18 at 18:16

Daniele Urania · Answer 2 · 2019-04-15T18:20:07.663

178

I think the best way to use react-router-dom Link in a MenuItem (and other MaterialUI component such as buttons) is to pass the Link in the "component" prop

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

you need to pass the route path in the 'to' prop of the "MenuItem" (which will be passed down to the Link component). In this way you don't need to add any style as it will use the MenuItem style

edited Apr 15 '19 at 18:20

answered Apr 15 '19 at 15:57

Daniele Urania

2,658
1
15
11

27

Yours should definitely be the answer in 2019. – Pablo Anaya Jun 11 '19 at 10:53
6

This is 100x better than the docs, they loooove lots of useless code – coiso Apr 23 '20 at 21:36
7

All other answers scare me – coiso Apr 23 '20 at 21:37
Although it's simplified, I think it may suffer from props collision. You may take this into your consideration. https://material-ui.com/guides/composition/#caveat-with-prop-forwarding – Mateen Jul 09 '20 at 03:03
Or shouldn't be rather instead of ... – drazewski Sep 25 '20 at 09:35
@drazewski MenuList It's exposed to help customisation of the Menu component, so if you need to do that yes, you should use it, but in the case reported here it is about the MenuItem customisation so Menu should be enough. – Daniele Urania Oct 01 '20 at 07:30
@Mateen is right. this doesn't work for all cases, as opposed to the longer solutions – chau-phan Jul 18 '21 at 00:38

JoeTidee · Answer 3 · 2018-07-30T13:45:53.093

99

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} />;

edited Jul 30 '18 at 13:45

answered Feb 19 '18 at 21:26

JoeTidee

24,754
25
104
149

score 89 · Answer 4 · answered May 15 '19 at 22:51

89

There's also another way to properly remove the styling of the link. You have to give it style of textDecoration='inherit' and color='inherit' you can either add those as styling to the link tag like:

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

or to make it more general just create a css class like:

.text-link {
    color: inherit;
    text-decoration: inherit;
}

And then just <Link className='text-link'>

answered May 15 '19 at 22:51

Panos

1,764
21
23

have you tried my solution https://stackoverflow.com/a/55693040/3000540 – Daniele Urania Jul 02 '19 at 10:52
1

This should be the accepted answer since it also removes the change in color. Also, is there a way to translate that CSS class into JSS? I had the same issue using material-ui and using the style prop helped. – norman123123 Aug 18 '20 at 19:18
this rather worked for me a:hover{ color: inherit; text-decoration: none; } – Jonathan bonzali Jul 07 '21 at 02:13
This works for me. And this way is easier than others. Thanks :) – Lojith Vinsuka Sep 18 '21 at 14:20

score 17 · Answer 5 · edited Nov 12 '18 at 17:06

17

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>

edited Nov 12 '18 at 17:06

Thomas Ebert

447
6
15

answered Jun 20 '18 at 05:08

Shubham Verma

8,783
6
58
79

score 15 · Answer 6 · edited Mar 21 '20 at 17:25

15

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

edited Mar 21 '20 at 17:25

Dharman

30,962
25
85
135

answered Mar 21 '20 at 16:52

Enravel

151
1
2

score 12 · Answer 7 · answered Jul 14 '20 at 20:16

12

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

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

answered Jul 14 '20 at 20:16

mdanishs

1,996
8
24
50

score 10 · Answer 8 · answered Mar 01 '19 at 01:54

10

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

answered Mar 01 '19 at 01:54

Dave Pile

5,559
3
34
49

Not a solution for react and styled-jsx… – AntonAL Mar 28 '19 at 13:36
1

actually its a solution it worked for me as im using sass beside my react and using all above solutions did not trigger component style .. – Ahmed Younes Apr 14 '19 at 20:36

score 10 · Answer 9 · answered Mar 27 '22 at 17:13

Material UI v5+

You should be able to globally customize MUI component styles, such as:

import { createTheme } from '@mui/material'

const theme = createTheme({
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          textDecoration: 'none',
        },
      },
    },
  },
})

const App = ({ currentAccount, neighborhoodsWithPropertyCount }) => (
  <ThemeProvider theme={theme}>
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  </ThemeProvider>
)

export default App

However, more often than not, you should actually be using the Link component from react-router-dom, in which case links would have no text decoration by default.

score 7 · Answer 10 · answered Jan 08 '19 at 10:30

//CSS

.navigation_bar > ul > li {
      list-style: none;
      display: inline;
      margin: 2%;
    }

    .link {
      text-decoration: none;
    }

//JSX

 <div className="navigation_bar">
            <ul key="nav">
              <li>
                <Link className="link" to="/">
                  Home
                </Link>
              </li>
            </ul>
          </div>

score 5 · Answer 11 · answered Jun 11 '21 at 14:22

5

Its pretty simple. Just add this style={{ textDecoration: 'none' }} inside of your <Link> tag

<Link to="first" style={{ textDecoration: 'none' }}>
   <MenuItem style={{ paddingLeft: 13 }}>
         Team 1
   </MenuItem>

answered Jun 11 '21 at 14:22

CS Alam

177
1
6

score 4 · Answer 12 · edited Nov 03 '21 at 00:50

4

The underline comes by default from the react-router-dom package. You can do the following to fix the issue.

<Link to="/route-path" style={{ textDecoration: 'none' }}> 
    // Rest of the code
</Link>

edited Nov 03 '21 at 00:50

Suresh Mangs

705
8
19

answered Nov 02 '21 at 16:33

Raj Kumar Kausik

47
1
2

This will work, and to make life easier you can also make a re-useable component like and use that so you don't have to repeatedly apply this styling across your whole app. – Matt S. Nov 02 '21 at 18:16

score 3 · Answer 13 · answered Jul 31 '19 at 04:23

3

Working for me, just add className="nav-link" and activeStyle{{textDecoration:'underline'}}

<NavLink className="nav-link" to="/" exact activeStyle= 
  {{textDecoration:'underline'}}>My Record</NavLink>

answered Jul 31 '19 at 04:23

vuvo

51
6

score 3 · Answer 14 · answered Apr 19 '20 at 18:44

Look here -> https://material-ui.com/guides/composition/#button.

This is the official material-ui guide. Maybe it'll be useful to you as it was for me.

However, in some cases, underline persists and you may want to use text-decoration: "none" for that. For a more cleaner approach, you can import and use makeStyles from material-ui/core.

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
    menu-btn: {
        textDecoration: 'none',
    },
}));

const classes = useStyles();

And then set className attribute to {classes.menu-btn} in your JSX code.

score 2 · Answer 15 · answered Dec 30 '21 at 13:17

2

jsx:

<Link className="link">
  test
</Link>

css:

.link{
    text-decoration: none;
}

answered Dec 30 '21 at 13:17

Serhii Zadorozhnyi

576
2
8
25

1

Doesn't look all that different from this one: https://stackoverflow.com/a/54089880/4294399 – General Grievance Dec 31 '21 at 16:31

ZebraCoder · Answer 16 · 2022-07-16T08:29:29.667

2

CSS Solution also for React

Add className/class in the Link(React Router) tag only.(Most Important Part!! Add ClassName in Link tag not any other.)
Add text-decoration: none in the css file.

Nav.js

  <Link to="/" className="link" >
    Get Started
  </Link>

Nav.css

.link{
text-decoration: none;
}

edited Jul 16 '22 at 08:29

answered Jun 16 '22 at 06:17

ZebraCoder

1,480
1
5
12

Remove the blue color. .link{ text-decoration: none; color : unset; } – Akash Kumar Seth Jul 15 '22 at 10:00

score 1 · Answer 17 · answered Feb 17 '19 at 02:28

To expand on @Grgur's answer, if you look in your inspector, you'll find that using Link components gives them the preset color value color: -webkit-link. You'll need to override this along with the textDecoration if you don't want it to look like a default hyperlink.

score 1 · Answer 18 · answered Jan 17 '20 at 16:14

1

style={{ backgroundImage: "none" }}

Only this worked for me

answered Jan 17 '20 at 16:14

tudorprodan

950
8
18

score 1 · Answer 19 · answered Jul 18 '20 at 19:53

I have resolve a problem maybe like your. I tried to inspect element in firefox. I will show you some results:

It is only the element I have inspect. The "Link" component will be convert to "a" tag, and "to" props will be convert to the "href" property:

And when I tick in :hov and option :hover and here is result:

As you see a:hover have text-decoration: underline. I only add to my css file:

a:hover {
 text-decoration: none;
}

and problem is resolved. But I also set text-decoration: none in some another classes (like you :D), that may be make some effects (I guess).

score 1 · Answer 20 · answered May 22 '21 at 07:54

1

<Link
   to='/maxpain'
   replace
   style={{
           textDecoration: 'none'
          }}
   >
     <LinkText>Click here!</LinkText>
</Link>

Simple as that!

answered May 22 '21 at 07:54

Mohamed Jakkariya

1,257
1
13
16

score 1 · Answer 21 · edited Apr 07 '22 at 10:42

1

the <Link /> tag basically is <a> tag on render time, so you can just write

a { text-decoration: none; }

and it worked for me :) Good luck

edited Apr 07 '22 at 10:42

hamidreza nikoonia

2,007
20
28

answered Apr 04 '22 at 04:45

Quoc Ly

11
1

This has been stated several times by others. You could improve your answer by citing documentation and providing formatted code samples. – Besworks Apr 05 '22 at 19:31

score 0 · Answer 22 · answered May 24 '20 at 14:11

<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).

Joel Jaimon · Answer 23 · 2020-12-06T16:11:35.013

0

Well you can simply use this piece of code in your scss file; This will remove that unwanted color change,

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

edited Dec 06 '20 at 16:11

answered Oct 17 '20 at 20:37

Joel Jaimon

202
3
10

score 0 · Answer 24 · answered Feb 25 '21 at 23:11

0

I had a problem where the Link element was changing my h4 to 'underline', setting text-decoration: 'none' did not work, my only solution was to use a button instead.

<Link to="/settings">
    <button>Settings</button>
</Link>

answered Feb 25 '21 at 23:11

tomstan11

1,047
7
9

score 0 · Answer 25 · answered May 08 '21 at 10:00

0

standard a-link and react-link are the same.

so if you are styling a-link, it will automatically style react-link.

a{ what ever styling you want }

answered May 08 '21 at 10:00

fruitloaf

1,628
15
10

score 0 · Answer 26 · answered Jul 30 '21 at 20:26

0

Just

<Link
   to={`$path`}
   style={{ borderBottom: "none" }}> 
    .... 
</Link>

answered Jul 30 '21 at 20:26

Th3 4nsw3r 1s 42

19
4

score 0 · Answer 27 · answered Nov 05 '21 at 17:30

I find this question and no one of the answers really resolve the problem at all in a general case (e.g. if the elements isn't a MenuItem). I suggest:

import {useHistory} from "react-router-dom";
const MyComp = () => {
  const history = useHistory();
  return <div>
    <AnyComponent onclick={()=>history.push('/path/u/want')}
  </div>
}

score 0 · Answer 28 · answered Dec 01 '21 at 08:00

0

I just added two lines and worked for me :)

{
 text-decoration: none; 
 color: black;
}

answered Dec 01 '21 at 08:00

Shakeel Haider

107
1
5

score 0 · Answer 29 · answered Mar 16 '22 at 14:45

0

 a {
  text-decoration: none !important;
  color: black !important; 
  font-size: 20px;
}

used !important in App.css

answered Mar 16 '22 at 14:45

tastytim

141
1
3

score 0 · Answer 30 · answered Jun 20 '22 at 14:58

0

Add css style in

a:link {
  text-decoration: none;
  color: #cc850a;
}

a:visited {
  text-decoration: none;
  color: #cc850a;
}

a:hover {
  text-decoration: none;
  color: #47a1ad;
}

a:active {
  text-decoration: none;
}

answered Jun 20 '22 at 14:58

Hitesh Sahu

41,955
17
205
154

score 0 · Answer 31 · answered Jan 11 '23 at 18:06

0

It's 2023 and has pseudo-class is widely supported. Since MenuItems are rendered as <li> we can define a css rule like this:

a:has(> li) {
  text-decoration: unset;
  color: unset;
}

This only modifies <a> elements that have a <li> child element.

answered Jan 11 '23 at 18:06

TripleSpeeder

111
3

score 0 · Answer 32 · answered Jun 30 '23 at 15:01

I found two main ways:

with MUI Link API

 import { Link } from '@mui/material';

 <Link
    href={`https://www.example.com/?symbol=${myValue}`}
    underline="none"
    color="inherit"
    target="_blank"
    rel="noopener noreferrer"
         >
    {myValue}
  </Link>

or with MUI sx props

  <Link
    href={`https://www.example.com/?symbol=${myValue}`}
    target="_blank"
    rel="noopener noreferrer"
    sx={{
      color: '#42a5f5'
      textDecoration: 'none',
      display: 'inline',
      fontWeight: 'light'
      mx: 0.5,
      fontSize: '0.80rem',
    }}
  >
    {value.toUpperCase()}
  </Link>

Alex Mireles · Answer 33 · 2019-07-11T21:50:11.160

-2

What worked for me is this:

<Link to="/" style={{boxShadow: "none"}}>

edited Jul 11 '19 at 21:50

answered Jun 06 '19 at 22:45

Alex Mireles

121
1
7

score -2 · Answer 34 · answered Aug 25 '21 at 14:11

-2

Just add this to your css file or styles to remove any link causing underline!

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

answered Aug 25 '21 at 14:11

ZedanSaheer

34
1
3

1

Please note that this rule is only intended for WebKit browsers. Here's the rule's [documentation page](https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link). – soufiane yakoubi Aug 25 '21 at 15:04

score -2 · Answer 35 · answered Dec 02 '21 at 18:40

-2

<Link 
   _hover={{
      textDecoration: "none"
   }}
   >
   Logo
</Link>

answered Dec 02 '21 at 18:40

DmitriyD

1

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

35 Answers35

Material UI v5+

Linked