我有以下几点:

如何去掉蓝色下划线? 代码如下:

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

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


当前回答

CSS解决方案也用于React

只在Link(React Router)标签中添加className/class。(最重要的部分!!在链接标签中添加ClassName,而不是其他标签。) 在css文件中添加text-decoration: none。

Nav.js

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

Nav.css

.link{
text-decoration: none;
}

其他回答

<Link />标签在呈现时基本上是<a>标签,所以你可以只写

a { text-decoration: none; }

这对我来说很有效:) 祝你好运

我发现这个问题,在一般情况下,没有一个答案真正解决了这个问题(例如,如果元素不是一个菜单项)。我建议:

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

Just

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

我认为在菜单项(和其他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样式

只需将此添加到您的css文件或样式中,以删除任何导致下划线的链接!

答:-webkit-any-link{文字修饰:没有;}