web-dev-qa-db-ja.com

gatsby-linkアンカータグのCSSカラーリングを使用したスタイル付きコンポーネント

<Link/>パッケージを使用してgatsby-linkパッケージからstyled-componentsコンポーネントのスタイルを設定しようとしています。通常は、constを作成し、Nameをstyled.aに設定して、CSSを記述します。ただし、<Link/>に対してconstを作成すると、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>
);
htmlcssreactjsstyled-componentsgatsby
9
Anders Kitson

次のようなことができるはずです：

import Link from 'gatsby-link';

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

// ...

<StyledLink to="/">
  Gatsby
</StyledLink>
9
Fabian Schultz

@kadrianはこれに対する最新のソリューションを持っています。彼の例は私にとってはうまくいきましたが、提供されたリンクに配列構文は必要ありません（混乱を避けるためだけ）。

const StyledLink = styled(props => <Link {...props} />)
    color: white;
    textDecoration: none;
0
ynotOverflow