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

158

I have the following:

enter image description here

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

Any insight or guidance would be greatly appreciated. Thank you in advance.

This question is tagged with javascript reactjs react-router

~ Asked on 2016-06-07 02:02:11

The Best Answer is


204

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

~ Answered on 2016-06-07 04:53:47


98

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

~ Answered on 2019-04-15 15:57:41


Most Viewed Questions: