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 <Link /> component not its children. — azium, Commented Jun 7, 2016 at 4:31

starball · Accepted Answer · 2022-12-24 09:24:02Z

386

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, 2022 at 9:24

starball

41.4k21 gold badges134 silver badges706 bronze badges

answered Jun 7, 2016 at 4:53

Grgur

7,2922 gold badges20 silver badges34 bronze badges

10

there a way to set global with textdecoration none ? in the app.css ?
– stackdave
Commented Oct 8, 2017 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
Commented Feb 17, 2018 at 18:16
<Button variant="link" style={{ textDecoration: "none" }}> Logout</Button>
– jrg
Commented Sep 29, 2023 at 20:59

Add a comment |

Daniele Urania · Accepted Answer · 2019-04-15 18:20:07Z

185

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, 2019 at 18:20

answered Apr 15, 2019 at 15:57

Daniele Urania

2,8281 gold badge16 silver badges11 bronze badges

28

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

This is 100x better than the docs, they loooove lots of useless code
– coiso
Commented Apr 23, 2020 at 21:36
8

All other answers scare me
– coiso
Commented Apr 23, 2020 at 21:37
Although it's simplified, I think it may suffer from props collision. You may take this into your consideration. material-ui.com/guides/composition/#caveat-with-prop-forwarding
– shiponcs
Commented Jul 9, 2020 at 3:03
Or shouldn't be rather <MenuList> instead of <Menu> ...
– drazewski
Commented Sep 25, 2020 at 9:35

| Show 3 more comments

JoeTidee · Accepted Answer · 2018-07-30 13:45:53Z

100

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, 2018 at 13:45

answered Feb 19, 2018 at 21:26

JoeTidee

25.7k29 gold badges109 silver badges161 bronze badges

Add a comment |

Panos · Accepted Answer · 2019-05-15 22:51:31Z

93

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, 2019 at 22:51

Panos

1,80422 silver badges23 bronze badges

have you tried my solution stackoverflow.com/a/55693040/3000540
– Daniele Urania
Commented Jul 2, 2019 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
Commented Aug 18, 2020 at 19:18
this rather worked for me a:hover{ color: inherit; text-decoration: none; }
– Jonathan bonzali
Commented Jul 7, 2021 at 2:13
This works for me. And this way is easier than others. Thanks :)
– Lojith Vinsuka
Commented Sep 18, 2021 at 14:20

Add a comment |

Thomas Ebert · Accepted Answer · 2018-11-12 17:06:09Z

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, 2018 at 17:06

Thomas Ebert

4396 silver badges15 bronze badges

answered Jun 20, 2018 at 5:08

Shubham Verma

9,5817 gold badges62 silver badges83 bronze badges

Add a comment |

Dharman · Accepted Answer · 2020-03-21 17:25:34Z

16

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

edited Mar 21, 2020 at 17:25

Dharman♦

32.5k25 gold badges94 silver badges140 bronze badges

answered Mar 21, 2020 at 16:52

Enravel

1611 silver badge2 bronze badges

Add a comment |

mdanishs · Accepted Answer · 2020-07-14 20:16:28Z

13

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, 2020 at 20:16

mdanishs

2,0268 gold badges25 silver badges50 bronze badges

Add a comment |

Dave Pile · Accepted Answer · 2019-03-01 01:54:22Z

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 1, 2019 at 1:54

Dave Pile

5,6743 gold badges35 silver badges50 bronze badges

Not a solution for react and styled-jsx…
– AntonAL
Commented Mar 28, 2019 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 <link> component style ..
– Ahmed Younes
Commented Apr 14, 2019 at 20:36

Add a comment |

Flavio Wuensche · Accepted Answer · 2022-03-27 17:13:50Z

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.

Kushal Atreya · Accepted Answer · 2019-01-08 10:30:40Z

7

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

answered Jan 8, 2019 at 10:30

Kushal Atreya

3033 silver badges7 bronze badges

Add a comment |

CS Alam · Accepted Answer · 2021-06-11 14:22:45Z

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, 2021 at 14:22

CS Alam

3072 silver badges7 bronze badges

Add a comment |

Suresh Mangs · Accepted Answer · 2021-11-03 00:50:21Z

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 3, 2021 at 0:50

Suresh Mangs

7258 silver badges19 bronze badges

answered Nov 2, 2021 at 16:33

Raj Kumar Kausik

471 silver badge2 bronze badges

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

Add a comment |

vuvo · Accepted Answer · 2019-07-31 04:23:35Z

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, 2019 at 4:23

vuvo

616 bronze badges

Add a comment |

Abishek Ilango · Accepted Answer · 2020-04-19 18:44:38Z

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.

ZebraCoder · Accepted Answer · 2022-07-16 08:29:29Z

3

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, 2022 at 8:29

answered Jun 16, 2022 at 6:17

ZebraCoder

1,6901 gold badge6 silver badges12 bronze badges

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

Add a comment |

Serhii Zadorozhnyi · Accepted Answer · 2021-12-30 13:17:05Z

2

jsx:

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

css:

.link{
    text-decoration: none;
}

answered Dec 30, 2021 at 13:17

Serhii Zadorozhnyi

6162 gold badges10 silver badges25 bronze badges

1

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

Add a comment |

AlleyOOP · Accepted Answer · 2019-02-17 02:28:08Z

1

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.

answered Feb 17, 2019 at 2:28

AlleyOOP

1,5664 gold badges20 silver badges44 bronze badges

Add a comment |

tudorprodan · Accepted Answer · 2020-01-17 16:14:32Z

1

style={{ backgroundImage: "none" }}

Only this worked for me

answered Jan 17, 2020 at 16:14

tudorprodan

9658 silver badges18 bronze badges

Add a comment |

Neil Nguyen · Accepted Answer · 2020-07-18 19:53:54Z

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

Mohamed Jakkariya · Accepted Answer · 2021-05-22 07:54:39Z

1

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

Simple as that!

answered May 22, 2021 at 7:54

Mohamed Jakkariya

1,4971 gold badge15 silver badges17 bronze badges

Add a comment |

hamidreza nikoonia · Accepted Answer · 2022-04-07 10:42:32Z

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 7, 2022 at 10:42

hamidreza nikoonia

2,1471 gold badge22 silver badges31 bronze badges

answered Apr 4, 2022 at 4:45

Quoc Ly

111 bronze badge

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

Add a comment |

Java wanna bee · Accepted Answer · 2023-06-30 15:01:14Z

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>

servrox · Accepted Answer · 2020-05-24 14:11:17Z

0

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

answered May 24, 2020 at 14:11

servrox

2393 silver badges9 bronze badges

Add a comment |

Joel Jaimon · Accepted Answer · 2020-12-06 16:11:35Z

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 6, 2020 at 16:11

answered Oct 17, 2020 at 20:37

Joel Jaimon

2823 silver badges10 bronze badges

Add a comment |

tomstan11 · Accepted Answer · 2021-02-25 23:11:27Z

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, 2021 at 23:11

tomstan11

1,2171 gold badge8 silver badges10 bronze badges

Add a comment |

fruitloaf · Accepted Answer · 2021-05-08 10:00:51Z

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 8, 2021 at 10:00

fruitloaf

2,54418 silver badges14 bronze badges

Add a comment |

Th3 4nsw3r 1s 42 · Accepted Answer · 2021-07-30 20:26:21Z

0

Just

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

answered Jul 30, 2021 at 20:26

Th3 4nsw3r 1s 42

195 bronze badges

Add a comment |

Massimo Rebuglio · Accepted Answer · 2021-11-05 17:30:55Z

0

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

answered Nov 5, 2021 at 17:30

Massimo Rebuglio

3411 silver badge9 bronze badges

Add a comment |

Shakeel Haider · Accepted Answer · 2021-12-01 08:00:51Z

0

I just added two lines and worked for me :)

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

answered Dec 1, 2021 at 8:00

Shakeel Haider

1371 silver badge6 bronze badges

Add a comment |

tastytim · Accepted Answer · 2022-03-16 14:45:11Z

0

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

used !important in App.css

answered Mar 16, 2022 at 14:45

tastytim

3112 silver badges5 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

37 Answers 37

Material UI v5+

Not the answer you're looking for? Browse other questions tagged
javascript
reactjs
react-router
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

37 Answers 37

Material UI v5+

Not the answer you're looking for? Browse other questions tagged javascriptreactjsreact-router or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
reactjs
react-router
or ask your own question.