如何摆脱React Router的Link组件的下划线？

我有以下内容：

如何摆脱蓝色下划线？代码如下：

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

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

任何见解或指导将不胜感激。先感谢您。

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

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

<Link>本质上将返回一个标准<a>标记，这就是我们textDecoration在此处应用规则的原因。

希望对您有所帮助

如果您使用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} />;

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

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

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

还有另一种方法可以正确删除链接的样式。你必须给它的风格textDecoration='inherit'和color='inherit'您可以添加为造型像的链接标签：

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

或者使其更通用，只需创建一个CSS类，如：

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

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

您可以添加style={{ textDecoration: 'none' }}在您的Link成分，以去除下划线。您也可以css在style块中添加更多，例如style={{ textDecoration: 'none', color: 'white' }}。

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

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

您的App.css（或对应版本）中包含核方法

a{
  text-decoration: none;
}

这可以防止为所有<a>标签加下划线，这是此问题的根本原因

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

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

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

这是官方的用户界面指南。也许对我来说对您有用。

但是，在某些情况下，下划线仍然存在，您可能需要使用文本装饰：“无”。为了更清洁，可以从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}。

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

style={{ backgroundImage: "none" }}

只有这个对我有用

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

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

在使用内部盖茨比另一组件时某些情况下<Link>元件，增加一个div与display: 'inline-block'该内部部件周围，防止下划线（的“页面”中的例子）。

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

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

我已经解决了一个像您这样的问题。我试图检查Firefox中的元素。我将向您展示一些结果：

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

2. 当我在：hov和选项：hover中打勾时，结果如下：

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

a:hover {
 text-decoration: none;
}

问题就解决了。但是我还设置了文本修饰：在其他一些类（如：D）中没有一个，可能会产生一些效果（我想）。

对我有用的是：

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