Javascript 如何去除React路由器链路组件的下划线？

我有以下资料：

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

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

1队

MenuItem组件来自

---

如有任何见解或指导，将不胜感激。提前谢谢。

我看到您使用的是内联样式

text装饰：“none”用于child，实际上它应该在
中使用，如下所示：

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


第一队

基本上会返回一个标准的
标记，这就是我们在这里应用
文本装饰
规则的原因

我希望这对您有所帮助
如果您正在使用
样式化组件
，您可以这样做：

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

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“样式化组件”导入样式化；
const StyledLink=已设置样式（链接）`
文字装饰：无；
&：焦点、&：悬停、&：访问、&：链接、&：活动{
文字装饰：无；
}
`;
导出默认值（道具）=>；
您可以在
链接
组件中添加
样式={{{textdecommention:'none'}}
，以删除下划线。您还可以在
style
块中添加更多
css
，例如
style={{{textdecommation:'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




家


要进一步展开，如果您查看inspector，您会发现使用
链接
组件会为它们提供预设的颜色值
颜色：-webkit链接
。如果不希望它看起来像默认的超链接，则需要将其与
文本装饰
一起覆盖

你的App.css（或对应的App.css）中有一种核心方法

这会阻止所有
标记加下划线，这是问题的根本原因我认为在菜单项（以及按钮等其他材质组件）中使用react router dom链接的最佳方法是在“组件”属性中传递链接


第一队
第二小组

您需要在“MenuItem”的“to”属性中传递路由路径（该属性将被传递到链接组件）。
这样，您不需要添加任何样式，因为它将使用菜单项样式
还有另一种方法可以正确删除链接的样式。您必须为它指定样式
textdeaction='inherit'
和
color='inherit'
，您可以将它们作为样式添加到链接标记中，如：



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

.text链接{
颜色：继承；
文字装饰：继承；
}

然后，对我有效的是：

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

为我工作，只需添加
className=“nav link”
和
activeStyle{{{text装饰：'underline'}

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

我的记录

只有这个对我有效
看这里->

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

这是官方材料用户界面指南。也许它会像对我一样对你有用

然而，在某些情况下，下划线仍然存在，您可能希望使用文本装饰：“无”来表示。为了获得更清晰的方法，可以从材质ui/core导入和使用makeStyles

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

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

const classes = useStyles();

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

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

页

在某些情况下，当使用盖茨比
组件内部的另一个组件时，在内部组件周围添加带有
显示的
div
，可防止在示例中的“页面”下划线。
如果有人正在寻找
材料ui
的链接组件。只需添加属性
下划线
，并将其设置为“无”

..
我已经解决了一个问题，可能和您的一样。我试图检查firefox中的元素。
我将向您展示一些结果：

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

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

正如您看到的：悬停有文本装饰：下划线。我只在css文件中添加：

a:hover {
 text-decoration: none;
}

问题解决了。但是我也设置了文本装饰：在其他一些类中没有（比如你：D），这可能会产生一些效果（我猜）。
你可以在你的scss文件中简单地使用这段代码；
这将消除不必要的颜色变化

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

对我来说，使用React路由器的图形组件不是一个选项。我更喜欢

React路由器v5.1.0与挂钩

如果您正在使用React>16.8.0和功能组件，React Router>5.1.0中有一个新的
useHistory
hook

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

从“react router dom”导入{useHistory}；
函数HomeButton（）{
const history=useHistory（）；
函数handleClick（）{
历史推送（“/主页”）；
}
返回(
回家吧
);
}
我遇到一个问题，链接元素将我的h4更改为“下划线”，设置文本装饰：“无”不起作用，我唯一的解决方法是使用按钮

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


设置
标准a-link和react-link是相同的

因此，如果您正在设置a-link的样式，它将自动设置react-link的样式

a{
你想要什么样的款式
}

点击这里！

就这么简单
 这很简单。只需将这个
style={{{textdecommation:'none'}}
添加到
标记中即可

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


第一队
在
组件上放置
文本装饰：“无”
而不是它的子组件。有没有办法将文本装饰设置为全局无？在app.css中？它可以工作：）。请注意，如果将样式复制粘贴到.css中（当然，因为您不喜欢内联样式），则
a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

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

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

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