css - 如何去除 React Link 的文字装饰?
问题描述
我正在使用 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>
任何人都知道如何从链接组件中删除文本装饰?
解决方案
如果react-router小于v4
尝试内联样式
<Link to="first" style={{ textDecoration: 'none' }}>
Link
</Link>
如果你想使用 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} />;
或者
你可以NavLink
在react-router v4中做到这一点
<NavLink
className="tags"
activeStyle={{ color: 'red' }}
to={'/page'}
>
LINK
</NavLink>