close

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

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to get rid of underline for Link component of React Router? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

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

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

    to get rid of underline for Link component of React Router If someone is looking for material-ui's Link component. Just add the property underline and set it to none
    <Link underline="none">...</Link>

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

    to get rid of underline for Link component of React Router If someone is looking for material-ui's Link component. Just add the property underline and set it to none
    <Link underline="none">...</Link>

Method 1

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.

I hope that helps

Method 2

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

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

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment