如何摆脱React Router的Link组件的下划线? [英] How to get rid of underline for Link component of React Router?

问题描述

我有以下内容:

如何消除蓝色下划线?代码如下:

 <链接到="first">< MenuItem style = {{paddingLeft:13，textDecoration:'none'}}>小组1</MenuItem></Link> 

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

任何见识或指导将不胜感激.预先谢谢你.

解决方案

我看到您正在使用内联样式. textDecoration:'none'用于子级，实际上，它应在< Link> 内部使用，例如:

 <链接到="first" style = {{textDecoration:'none'}}>< MenuItem style = {{paddingLeft:13}}> Team 1</MenuItem></链接> 

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

我希望对您有帮助

I have the following:

How do I get rid of the blue underline? The code is below:

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

The MenuItem component is from http://www.material-ui.com/#/components/menu

Any insight or guidance would be greatly appreciated. Thank you in advance.

解决方案

I see you're using inline styles. textDecoration: 'none' is used in child, where in fact it should be used inside <Link> as such:

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

<Link> will essentially return a standard <a> tag, which is why we apply textDecoration rule there.

I hope that helps

这篇关于如何摆脱React Router的Link组件的下划线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！