Question

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

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

反应：

<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>

有人知道如何从链接组件中删除文本修饰吗？

Answer 1

如果反应路由器小于 v4

尝试内联样式

var localStorage = window.localStorage;

if(localStorage.getItem("username")) {
    console.log(localStorage.getItem("username"))
} else {
    var name = prompt("Please enter your name");
    localStorage.setItem('username', name);
}

如果要使用样式化组件，可以执行以下操作：

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

OR

您可以在反应路由器v4

中使用

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 Link的文字修饰？

1 个答案: