Question

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

＆＃13;

import styled from 'styled-components';
import {
  fontSize
} from 'styled-system';

const Link = a `
  ${fontSize};
  color: white;

  &:link {
    text-decoration: none;
  }
`;

export default Link;

＆＃13;

我想对react-router的链接组件使用完全相同的样式。我应该使用css中的styled-components还是有其他方式来执行此操作？

Answer 1

一种方法是不使用React路由器链接组件，而是使用自己的链接组件和props.history.push的onclick属性（“ROUTE”）

Answer 2

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

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

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

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

2 个答案: