样式组件,使用gatsby-link锚标记css着色

Question

我正在尝试使用包来打包<Link/>组件中的组件通常我只是创建一个它等于例如的set 并编写我的css.但是当我创建一个for 时,我得到一个错误.如何为组件设置样式.gatsby-linkstyled-componentsconstNamestyled.aconst<Link/>Duplicate declaration "Link"<Link>styled-components

这是我的代码下面

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

const Header = styled.div`
  margin: 3rem auto;
  max-width: 600px;
  background:red;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const Title = styled.h1`
  color: aqua;
`;

const Link = styled.a`
  color: aqua;
`;


export default () => (
  <Header>
        <Title>
          <Link to="/">
            Gatsby
          </Link>
        </Title>
  </Header>
);

Answer 1

你应该可以这样做:

import { Link } from 'gatsby';

const StyledLink = styled(props => <Link {...props} />)`
  color: aqua;
`;

// ...

<StyledLink to="/">
  Gatsby
</StyledLink>

Answer 2

重命名Link导入。

import { Link as GatsbyLink } from "gatsby";

如果您为组件Link命名，您可能会遇到命名冲突，因为该名称在不同框架中无处不在。您描述的错误指出您有多个同名组件。

明确命名您的组件（改编自@Fabian Schultz 的回答）：

import { Link as GatsbyLink } from "gatsby";

const StyledLink = styled(GatsbyLink)`
  color: aqua;
`;

// ...

<StyledLink to="/">
  Gatsby
</StyledLink>