使用styled-components为gatsby-link的<Link/>组件设样式时遇重复声明错误怎么办？

这个问题我之前也碰到过，本质就是变量名重复声明导致的冲突，给你两个实用的解决方案：

方案一：给Gatsby的Link设置导入别名 #

把从gatsby-link导入的Link重命名，避免和你要创建的styled组件同名，之后用这个别名来创建样式化组件：

import React from 'react';
// 给Gatsby的Link起别名GatsbyLink
import { Link as GatsbyLink } from 'gatsby-link';
import styled from "styled-components";

// 用别名来创建你的样式化Link组件
const Link = styled(GatsbyLink)`
  /* 这里写你的CSS样式 */
  color: #333;
  text-decoration: none;
  &:hover {
    color: #666;
  }
`;

const Header = styled.header`
  /* Header的样式 */
  padding: 1rem;
  background: #f5f5f5;
`;

// 使用的时候直接用你定义的Link组件
const Nav = () => (
  <Header>
    <Link to="/">首页</Link>
    <Link to="/about">关于我们</Link>
  </Header>
);

export default Nav;

方案二：给样式化组件起不同的名字 #

如果你不想改导入的别名，也可以直接给styled组件起一个独特的名字，比如StyledLink，这样就不会和原有的Link冲突了：

import React from 'react';
import Link from 'gatsby-link';
import styled from "styled-components";

// 创建样式化组件时用不同的名字
const StyledLink = styled(Link)`
  color: #333;
  text-decoration: none;
  &:hover {
    color: #666;
  }
`;

const Header = styled.header`
  padding: 1rem;
  background: #f5f5f5;
`;

// 使用时调用StyledLink
const Nav = () => (
  <Header>
    <StyledLink to="/">首页</StyledLink>
    <StyledLink to="/about">关于我们</StyledLink>
  </Header>
);

export default Nav;

两种方案都能解决“Duplicate declaration 'Link'”的错误，你可以根据自己的代码习惯选择其中一种~

内容的提问来源于stack exchange，提问作者Anders Kitson