javascript - How to get rid of underline for Link component of React Router? - Stack Overflow

admin管理员组

文章数量:1126099

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

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

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Jun 30, 2021 at 19:06 dbc 116k2525 gold badges261261 silver badges385385 bronze badges asked Jun 7, 2016 at 2:02 Jo KoJo Ko 7,5751616 gold badges6868 silver badges126126 bronze badges 1

• 18 put textDecoration: 'none' on the <Link /> component not its children. – azium Commented Jun 7, 2016 at 4:31

Add a comment  | 

37 Answers 37

Sorted by: Reset to default 1 2 Next 394

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

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

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

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> 

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

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

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

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

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.

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

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>

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>

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

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

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.

CSS Solution also for React

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

Nav.js

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

Nav.css

.link{
text-decoration: none;
}

jsx:

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

css:

.link{
    text-decoration: none;
}

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.

style={{ backgroundImage: "none" }}

Only this worked for me

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

1. 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:

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

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

Simple as that!

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

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>

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

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

---

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>

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 }

Just

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

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

I just added two lines and worked for me :)

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

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

used !important in App.css

本文标签： javascriptHow to get rid of underline for Link component of React RouterStack Overflow