如何去除 React Link 的文字装饰？

Question

我正在使用 React 和 react-router-domsLink组件在页面之间导航。

但是我正在努力删除组件中的文本装饰。

反应：

<Link className="nav-link" to="/page">LINK</Link>

CSS：

.nav-link  {
    text-decoration: none;
}

这个 CSS 似乎不起作用，但是当我将 替换Link为a组件时它工作正常。

<a className="nav-link" href="/page">LINK</a>

任何人都知道如何从 Link 组件中删除文本装饰？

Answer 1

如果react-router小于v4

尝试内联样式

<Link to="first" style={{ textDecoration: 'none' }}>
  Link
</Link>

如果你想使用样式组件，你可以这样做：

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

或者

你可以NavLink在react-router v4 中做到这一点

 <NavLink
   className="tags"
   activeStyle={{ color: 'red' }}
   to={'/page'}
 >
   LINK
 </NavLink>