Question

我有以下内容：

如何摆脱蓝色下划线？代码如下：

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

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

非常感谢任何见解或指导。提前谢谢。

Answer 1

我看到你正在使用内联样式。 textDecoration: 'none'用于子项，实际上它应该在<Link>内使用：

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

<Link>基本上会返回标准<a>标记，这就是我们在那里应用textDecoration规则的原因。

我希望有帮助

Answer 2

如果您使用styled-components，则可以执行以下操作：

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} />;

Answer 3

您可以在style={{ textDecoration: 'none' }}组件中添加Link来删除下划线。您还可以在css块中添加更多style，例如style={{ textDecoration: 'none', color: 'white' }}。

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1>

Answer 4

a:-webkit-any-link {
  text-decoration: none;
  color: inherit;
}

Answer 5

看这里-> https://material-ui.com/guides/composition/#button。

这是官方的用户界面指南。也许对您和我一样有用。

但是，在某些情况下，下划线仍然存在，您可能需要使用文本装饰：“无”。为了更清洁，可以从material-ui / core导入并使用makeStyles。

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
    menu-btn: {
        textDecoration: 'none',
    },
}));

const classes = useStyles();

然后在您的JSX代码中将className属性设置为{classes.menu-btn}。

Answer 6

如果有人在寻找material-ui的链接组件。只需添加属性underline并将其设置为无

<Link underline="none">...</Link>

Answer 7

为我工作，只需添加className="nav-link"和activeStyle{{textDecoration:'underline'}}

<NavLink className="nav-link" to="/" exact activeStyle= 
  {{textDecoration:'underline'}}>My Record</NavLink>

Answer 8

// CSS

.navigation_bar > ul > li {
      list-style: none;
      display: inline;
      margin: 2%;
    }

    .link {
      text-decoration: none;
    }

// JSX

 <div className="navigation_bar">
            <ul key="nav">
              <li>
                <Link className="link" to="/">
                  Home
                </Link>
              </li>
            </ul>
          </div>

Answer 9

App.css（或对应版本）中存在核方法

a{
  text-decoration: none;
}

这可以防止所有<a>标签下划线，这是此问题的根本原因

Answer 10

我认为在MenuItem（和其他MaterialUI组件，例如按钮）中使用react-router-dom Link的最佳方法是在“ component”属性中传递Link

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

您需要在“ MenuItem”的“ to”属性中传递路由路径（该路径将向下传递到Link组件）。这样，您无需添加任何样式，因为它将使用MenuItem样式

Answer 11

如果要在@Grgur's answer上进行扩展，请查看检查器，您会发现使用public enum RoleEnum { SUPER_ADMIN("SUPER_ADMIN"), RESTAURANTE_ADMIN("RESTAURANTE_ADMIN"); private final String roleCode; private RoleEnum(String roleCode) { this.roleCode = roleCode; }组件会为它们提供预设的颜色值<select class="form-control" id="val-skill" name="role_id"> <option th:each="role : ${T(com.users.enumeration.RoleEnum).values()}" th:value="${role}" th:text="${role}"></option> </select>。如果您不希望它看起来像默认的超链接，则需要将其与Link一起覆盖。

Answer 12

我已经解决了一个像您这样的问题。我试图检查Firefox中的元素。我将向您展示一些结果：

这只是我检查的元素。 “链接”组件将转换为“ a”标签，而“ to”道具将转换为“ href”属性：

当我在：hov和选项：hover中打勾时，结果如下：

如您所见，悬停带有文本装饰：下划线。我只添加到我的CSS文件：

a:hover {
 text-decoration: none;
}

，问题已解决。但是我还设置了文本修饰：在其他一些类（如：D）中没有一个，可能会产生一些效果（我想）。

Answer 13

<Link
   to='/maxpain'
   replace
   style={{
           textDecoration: 'none'
          }}
   >
     <LinkText>Click here!</LinkText>
</Link>

就这么简单！

Answer 14

其实很简单。只需将此 style={{ textDecoration: 'none' }} 添加到您的 <Link> 标签内

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

Answer 15

还有另一种方法可以正确删除链接的样式。您必须给它提供textDecoration='inherit'和color='inherit'样式，您可以将它们作为样式添加到链接标签中，例如：

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

或更一般地说，只需创建一个CSS类，即可：

.text-link {
    color: inherit;
    text-decoration: inherit;
}

然后是<Link className='text-link'>

Answer 16

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

在某些情况下，如果在盖茨比<Link>组件内部使用另一个组件，则在内部组件周围添加div和display: 'inline-block'来防止下划线（在示例中为“ Page”）。

Answer 17

好吧，您只需在scss文件中使用这段代码即可；这将消除不必要的颜色变化，

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

Answer 18

我遇到了一个问题，链接元素将我的 h4 更改为“下划线”，设置文本装饰：“无”不起作用，我唯一的解决方案是改用按钮。

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

Answer 19

标准的 a-link 和 react-link 是一样的。

所以如果你给一个链接设置样式，它会自动设置 react-link 的样式。

一个{ 你想要什么造型 }

Answer 20

就

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

Answer 21

对我有用的是：

<Link to="/" style={{boxShadow: "none"}}>

Answer 22

对我来说，使用 React Router 的图形组件不是一个选择。我更喜欢programmatically navigate using React Router。

<块引用>

带有钩子的 React Router v5.1.0

如果您使用的是 React >16.8.0 和函数式组件，那么 React Router >5.1.0 中有一个新的 useHistory 钩子。

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

如何摆脱React Router的Link组件的下划线？

22 个答案: