使 react-router 链接看起来像我的默认链接答案

【问题标题】：Making react-router link look like my default link使 react-router 链接看起来像我的默认链接
【发布时间】：2018-08-21 13:28:45
【问题描述】：

我使用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-routers 链接组件使用完全相同的样式。我应该使用styled-components 中的css 还是有其他方法可以做到这一点？

【问题讨论】：

标签： reactjs react-router styled-components

【解决方案1】：

一种方法是不使用 React 路由器链接组件，而是使用您自己的链接组件，其 onclick 属性为 props.history.push("ROUTE")

【讨论】：

【解决方案2】：

您可以使用括号来设置任何 react-component（如 react-router Link）的样式：

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

请参阅文档以获取更多参考： https://www.styled-components.com/docs/basics#styling-any-components

【讨论】：