使react-router链路看起来像我的默认链路

Question

我使用styled-components设置默认链接的样式，如下所示：

​

import styled from 'styled-components';
import {
  fontSize
} from 'styled-system';

const Link = a `
  ${fontSize};
  color: white;

  &:link {
    text-decoration: none;
  }
`;

export default Link;

​

我想为react-router的链接组件使用完全相同的样式。我应该从styled-components中使用css吗?或者有其他方法可以做到这一点吗？

Answer 1

一种方法是不使用React路由器链路组件，而是使用您自己的具有onclick属性的链路组件(“props.history.push”)

Answer 2

您可以使用parantheses设置任何react-component (如react-router Link)的样式：

​

const StyledLink = styled(Link)`
    color: red;
`;

有关更多参考信息，请参阅文档：https://www.styled-components.com/docs/basics#styling-any-components

​