我有以下几点:

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

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

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


当前回答

我有一个问题,链接元素将我的h4更改为“下划线”,设置文本装饰:“none”不起作用,我唯一的解决方案是使用按钮。

<Link to="/settings">
    <button>Settings</button>
</Link>

其他回答

<Link to="/page">
    <Box sx={{ display: 'inline-block' }}>
        <PLink variant="primary">Page</PLink>
    </Box>
</Link>

在某些情况下,当在Gatsby <Link>组件中使用另一个组件时,在内部组件周围添加带有display: 'inline-block'的div,可以防止下划线(在示例中为'Page')。

核心方法在app。css(或对应版本)中

a{
  text-decoration: none;
}

这防止下划线为所有<a>标签,这是这个问题的根本原因

如果你正在使用样式化组件,你可以这样做:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';


const StyledLink = styled(Link)`
    text-decoration: none;

    &:focus, &:hover, &:visited, &:link, &:active {
        text-decoration: none;
    }
`;

export default (props) => <StyledLink {...props} />;
a:-webkit-any-link {
  text-decoration: none;
  color: inherit;
}

Just

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