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     lt Link to  first  gt  lt MenuItem style   paddingLeft  13  textDecoration   none    gt  Team 1  lt  MenuItem gt  lt  Link gt    The MenuItem component is from http   www material-ui com   components menu   Any insight or guidance would be greatly appreciated  Thank you in advance

User · Answer

CSS   navigation bar  gt  ul  gt  li         list-style  none        display  inline        margin  2               link         text-decoration  none            JSX    lt div className  navigation bar  gt               lt ul key  nav  gt                 lt li gt                   lt Link className  link  to     gt                    Home                  lt  Link gt                 lt  li gt               lt  ul gt             lt  div gt

User · Answer

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      gt         menu-btn            textDecoration   none                const classes   useStyles      And then set className attribute to  classes menu-btn  in your JSX code

User · Answer

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

User · Answer

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    lt Link style    color   inherit   textDecoration   inherit    gt    or to make it more general just create a css class like    text-link       color  inherit      text-decoration  inherit      And then just  lt Link className  text-link  gt

User · Answer

Working for me  just add className  nav-link  and activeStyle  textDecoration  underline      lt NavLink className  nav-link  to     exact activeStyle       textDecoration  underline    gt My Record lt  NavLink gt

User · Answer

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  quot Link quot  component will be convert to  quot a quot  tag  and  quot to quot  props will be convert to the  quot href quot  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

User · Answer

I see you re using inline styles  textDecoration   none  is used in child  where in fact it should be used inside  lt Link gt  as such    lt Link to  first  style    textDecoration   none     gt     lt MenuItem style    paddingLeft  13    gt Team 1 lt  MenuItem gt   lt  Link gt     lt Link gt  will essentially return a standard  lt a gt  tag  which is why we apply textDecoration rule there   I hope that helps

User · Answer

style    backgroundImage   none       Only this worked for me

User · Answer

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   lt Menu gt      lt MenuItem component  Link  to    first   gt Team 1 lt  MenuItem gt      lt MenuItem component  Link  to    second   gt Team 2 lt  MenuItem gt   lt  Menu gt    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

User · Answer

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        lt h1 gt     lt Link style    textDecoration   none   color   white     to   getting-started  gt      Get Started    lt  Link gt   lt  h1 gt

User · Answer

Well you can simply use this piece of code in your scss file  This will remove that unwanted color change  a -webkit-any-link      amp  hover       color  white

User · Answer

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   lt Link to  quot  settings quot  gt       lt button gt Settings lt  button gt   lt  Link gt

User · Answer

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        amp  focus   amp  hover   amp  visited   amp  link   amp  active           text-decoration  none            export default  props    gt   lt StyledLink     props    gt

User · Answer

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

User · Answer

There is the nuclear approach which is in your App css  or counterpart   a    text-decoration  none      which prevents underline for all  lt a gt  tags which is the root cause of this problem

User · Answer

lt Link to   page  gt       lt Box sx    display   inline-block     gt           lt PLink variant  primary  gt Page lt  PLink gt       lt  Box gt   lt  Link gt    In some cases when using another component inside the Gatsby  lt Link gt  component  adding a div with display   inline-block  around the inner component  prevents underlining  of  Page  in the example

User · Answer

What worked for me is this    lt Link to     style   boxShadow   none    gt

User · Answer

For me it was not an option to use the graphical components of React Router  I prefer programmatically navigate using React Router   React Router v5 1 0 with hooks  There is a new useHistory hook in React Router  gt 5 1 0 if you are using React  gt 16 8 0 and functional components  import   useHistory   from  quot react-router-dom quot    function HomeButton       const history   useHistory       function handleClick         history push  quot  home quot           return        lt button type  quot button quot  onClick  handleClick  gt        Go home      lt  button gt

User · Answer

a -webkit-any-link     text-decoration  none    color  inherit

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

Examples related to javascript

Examples related to reactjs

Examples related to react-router