我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
当前回答
对我有用的是:
<Link to="/" style={{boxShadow: "none"}}>
其他回答
你可以在你的scss文件中使用这段代码; 这将消除不需要的颜色变化,
a:-webkit-any-link {
&:hover {
color: white;
}
}
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;
}
Just
<Link
to={`$path`}
style={{ borderBottom: "none" }}>
....
</Link>
我看到你在使用内联样式。textDecoration: 'none'在child中使用,实际上它应该在<Link>中使用,如下所示:
<Link to="first" style={{ textDecoration: 'none' }}>
<MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>
<Link>将返回一个标准的<a>标签,这就是为什么我们在这里应用textDecoration规则的原因。
我发现这个问题,在一般情况下,没有一个答案真正解决了这个问题(例如,如果元素不是一个菜单项)。我建议:
import {useHistory} from "react-router-dom";
const MyComp = () => {
const history = useHistory();
return <div>
<AnyComponent onclick={()=>history.push('/path/u/want')}
</div>
}