我有以下几点:
如何去掉蓝色下划线? 代码如下:
<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="/page">
<Box sx={{ display: 'inline-block' }}>
<PLink variant="primary">Page</PLink>
</Box>
</Link>
在某些情况下,当在Gatsby <Link>组件中使用另一个组件时,在内部组件周围添加带有display: 'inline-block'的div,可以防止下划线(在示例中为'Page')。
其他回答
<Link to="/page">
<Box sx={{ display: 'inline-block' }}>
<PLink variant="primary">Page</PLink>
</Box>
</Link>
在某些情况下,当在Gatsby <Link>组件中使用另一个组件时,在内部组件周围添加带有display: 'inline-block'的div,可以防止下划线(在示例中为'Page')。
<Link />标签在呈现时基本上是<a>标签,所以你可以只写
a { text-decoration: none; }
这对我来说很有效:) 祝你好运
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;
}
看这里-> 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代码中。
我有一个问题,链接元素将我的h4更改为“下划线”,设置文本装饰:“none”不起作用,我唯一的解决方案是使用按钮。
<Link to="/settings">
<button>Settings</button>
</Link>