如何去掉 React Router 的 Link 组件的下划线？答案

【问题标题】：How to get rid of underline for Link component of React Router?如何去掉 React Router 的 Link 组件的下划线？
【发布时间】：2016-10-06 18:25:02
【问题描述】：

我有以下几点：

如何去掉蓝色下划线？代码如下：

<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>

MenuItem 组件来自http://www.material-ui.com/#/components/menu

【问题讨论】：

将textDecoration: 'none' 放在<Link /> 组件上，而不是它的子组件上。

标签： javascript reactjs react-router

【解决方案1】：

我看到您正在使用内联样式。 textDecoration: 'none' 用于 child，实际上它应该在 <Link> 内部使用：

<Link to="first" style={{ textDecoration: 'none' }}>
  <MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>

<Link> 本质上会返回一个标准的<a> 标签，这就是我们在那里应用textDecoration 规则的原因。

希望对你有帮助

【讨论】：

有没有办法用 textdecoration none 设置全局？在 app.css 中？
它有效:)。请注意，如果您将样式复制粘贴到您的 .css 中（因为，当然，您不喜欢内联样式），则为 text-decoration: none;

【解决方案2】：

我认为在 MenuItem（和其他 MaterialUI 组件，例如按钮）中使用 react-router-dom 链接的最佳方法是在“组件”属性中传递链接

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

您需要在“MenuItem”的 'to' 属性中传递路由路径（将向下传递给 Link 组件）。这样您就不需要添加任何样式，因为它将使用 MenuItem 样式

【讨论】：

2019 年你的绝对应该是答案。
这比 docs 好 100 倍，他们喜欢大量无用的代码
所有其他答案都吓到我了
虽然简化了，但我认为它可能会受到道具碰撞的影响。您可以考虑到这一点。 material-ui.com/guides/composition/#caveat-with-prop-forwarding
或者不应该是而不是 ...

【解决方案3】：

如果你使用styled-components，你可以这样做：

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

【讨论】：

【解决方案4】：

还有另一种方法可以正确删除链接的样式。你必须给它textDecoration='inherit' 和color='inherit' 的样式，你可以将它们作为样式添加到链接标签中，例如：

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

或者为了更通用，只需创建一个 css 类，例如：

.text-link {
    color: inherit;
    text-decoration: inherit;
}

然后就是<Link className='text-link'>

【讨论】：

你试过我的解决方案了吗stackoverflow.com/a/55693040/3000540
这应该是公认的答案，因为它也消除了颜色的变化。另外，有没有办法将该 CSS 类转换为 JSS？我在使用 material-ui 和使用 style 属性时遇到了同样的问题。
这对我有用 a:hover{ color: inherit;文字装饰：无； }
这对我有用。而且这种方式比其他方式更容易。谢谢:)

【解决方案5】：

您可以在Link 组件中添加style={{ textDecoration: 'none' }} 以删除下划线。您还可以在 style 块中添加更多 css，例如style={{ textDecoration: 'none', color: 'white' }}.

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1>

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

在您的 App.css（或对应物）中有核方法

a{
  text-decoration: none;
}

这会阻止所有<a> 标记的下划线，这是导致此问题的根本原因

【讨论】：

不是 react 和 styled-jsx 的解决方案……
实际上它是一个对我有用的解决方案，因为我在我的反应旁边使用 sass 并且使用上述所有解决方案并没有触发组件样式..

【解决方案8】：

如果有人正在寻找material-ui 的链接组件。只需添加属性underline 并将其设置为无

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

它非常简单。只需将此 style={{ textDecoration: 'none' }} 添加到您的 <Link> 标签内

<Link to="first" style={{ textDecoration: 'none' }}>
   <MenuItem style={{ paddingLeft: 13 }}>
         Team 1
   </MenuItem>

【讨论】：

【解决方案11】：

为我工作，只需添加 className="nav-link" 和 activeStyle{{textDecoration:'underline'}}

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

【讨论】：

【解决方案12】：

看这里 -> https://material-ui.com/guides/composition/#button.

这是官方的material-ui指南。也许它对你有用，就像对我一样。

但是，在某些情况下，下划线仍然存在，您可能需要为此使用 text-decoration: "none"。要获得更简洁的方法，您可以从 material-ui/core 导入并使用 makeStyles。

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
    menu-btn: {
        textDecoration: 'none',
    },
}));

const classes = useStyles();

然后在 JSX 代码中将 className 属性设置为 {classes.menu-btn}。

【讨论】：

【解决方案13】：

扩展@Grgur's answer，如果您查看检查器，您会发现使用Link 组件会为它们提供预设颜色值color: -webkit-link。如果您不希望它看起来像默认超链接，则需要将其与 textDecoration 一起覆盖。

【讨论】：

【解决方案14】：

style={{ backgroundImage: "none" }}

只有这个对我有用

【讨论】：

【解决方案15】：

我已经解决了一个可能像你这样的问题。我试图检查 Firefox 中的元素。我会告诉你一些结果：

这只是我检查的元素。 “Link”组件将转换为“a”标签，“to”道具将转换为“href”属性：

当我勾选 :hov 和选项 :hover 时，结果如下：

如您所见，a:hover 有 text-decoration: 下划线。我只添加到我的 css 文件中：

a:hover {
 text-decoration: none;
}

问题就解决了。但我还在其他一些类中设置了 text-decoration: none （比如你：D），这可能会产生一些效果（我猜）。

【讨论】：

【解决方案16】：

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

就这么简单！

【讨论】：

【解决方案17】：

下划线默认来自react-router-dom 包。您可以执行以下操作来解决此问题。

<Link to="/route-path" style={{ textDecoration: 'none' }}> 
    // Rest of the code
</Link>

【讨论】：

这将起作用，并且为了让生活更轻松，您还可以制作像这样的可重用组件并使用它，这样您就不必在整个应用程序中重复应用此样式。

【解决方案18】：

<Link to="/page">
    <Box sx={{ display: 'inline-block' }}>
        <PLink variant="primary">Page</PLink>
    </Box>
</Link>

在某些情况下，当在 Gatsby <Link> 组件中使用另一个组件时，在内部组件周围添加 div 和 display: 'inline-block'，可以防止下划线（示例中的“页面”）。

【讨论】：

【解决方案19】：

你可以简单地在你的 scss 文件中使用这段代码；这将消除不需要的颜色变化，

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

【讨论】：

【解决方案20】：

我遇到了一个问题，Link 元素将我的 h4 更改为“下划线”，设置 text-decoration: 'none' 不起作用，我唯一的解决方案是改用按钮。

<Link to="/settings">
    <button>Settings</button>
</Link>

【讨论】：

【解决方案21】：

标准的a-link和react-link是一样的。

因此，如果您为 a-link 设置样式，它会自动设置 react-link 的样式。

一个{ 你想要什么造型 }

【讨论】：

【解决方案22】：

只是

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

【讨论】：

【解决方案23】：

我发现了这个问题，但在一般情况下（例如，如果元素不是 MenuItem），没有一个答案能真正解决问题。我建议：

import {useHistory} from "react-router-dom";
const MyComp = () => {
  const history = useHistory();
  return <div>
    <AnyComponent onclick={()=>history.push('/path/u/want')}
  </div>
}

【讨论】：

【解决方案24】：

我刚刚添加了两行并为我工作:)

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

【讨论】：

【解决方案25】：

<Link 
   _hover={{
      textDecoration: "none"
   }}
   >
   Logo
</Link>

【讨论】：

【解决方案26】：

jsx:

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

css:

.link{
    text-decoration: none;
}

【讨论】：

看起来和这个没什么不同：stackoverflow.com/a/54089880/4294399

【解决方案27】：

对我有用的是：

<Link to="/" style={{boxShadow: "none"}}>

【讨论】：

你试过我的解决方案了吗？ stackoverflow.com/a/55693040/3000540

【解决方案28】：

只需将其添加到您的 css 文件或样式中即可删除任何导致下划线的链接！

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

【讨论】：

请注意，此规则仅适用于 WebKit 浏览器。这是规则的documentation page。