样式化的组件，带有 gatsby-link 锚标签 css 着色

Posted 2023-02-22

【中文标题】样式化的组件，带有 gatsby-link 锚标签 css 着色

【英文标题】：styled components, with gatsby-link anchor tag css coloring

【发布时间】：2018-09-13 07:24:26

【问题描述】：

我正在尝试使用styled-components 包从gatsby-link 包中设置<Link/> 组件的样式通常我只是创建一个const 给它一个Name 设置它等于styled.a 例如并编写我的css .但是，当我为<Link/> 创建const 时，我收到Duplicate declaration "Link" 错误。如何使用styled-components 设置<Link> 组件的样式。

下面是我的代码

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>
);

【参考方案1】：

重命名 Link 导入。

import Link as GatsbyLink from "gatsby";

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

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

import  Link as GatsbyLink  from "gatsby";

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

// ...

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

【参考方案2】：

您应该能够执行以下操作：

import  Link  from 'gatsby';

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

// ...

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

---

过时版本（gatsby v1、styled-components v3）：

import Link from 'gatsby-link';

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

// ...

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

【讨论】：

请注意，这似乎只适用于使用 styled('div')`` 语法的组件。不是像 react-emotion 这样的项目允许您使用的简写 styled.div`` 语法。

旁注：使用gatsby": "^2.0.98", 我必须先使用import Link from "gatsby";，然后再使用styled(props => <Link ...props />)，参见github.com/styled-components/styled-components/issues/…