我有以下几点:
如何去掉蓝色下划线? 代码如下:
<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
当前回答
jsx:
<Link className="link">
test
</Link>
css:
.link{
text-decoration: none;
}
其他回答
只需将此添加到您的css文件或样式中,以删除任何导致下划线的链接!
答:-webkit-any-link{文字修饰:没有;}
<Link to="/page">
<Box sx={{ display: 'inline-block' }}>
<PLink variant="primary">Page</PLink>
</Box>
</Link>
在某些情况下,当在Gatsby <Link>组件中使用另一个组件时,在内部组件周围添加带有display: 'inline-block'的div,可以防止下划线(在示例中为'Page')。
这很简单。只需在<Link>标签内添加style={{textDecoration: 'none'}}
<Link to="first" style={{ textDecoration: 'none' }}>
<MenuItem style={{ paddingLeft: 13 }}>
Team 1
</MenuItem>
看这里-> https://material-ui.com/guides/composition/#button。
这是官方的材质界面指南。也许它对你会像对我一样有用。
然而,在某些情况下,下划线仍然存在,您可能需要使用text-decoration: "none"。为了更简洁的方法,您可以从material-ui/core导入并使用makestyle。
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles(() => ({
menu-btn: {
textDecoration: 'none',
},
}));
const classes = useStyles();
然后将className属性设置为{classes。menu-btn}在JSX代码中。
为了扩展@Grgur的答案,如果你在检查器中查看,你会发现使用Link组件会给它们预设的颜色值color: -webkit-link。如果你不想让它看起来像一个默认的超链接,你需要覆盖这个textDecoration。