web-dev-qa-db-fra.com

composants stylisés, avec coloration css de la balise d'ancrage gatsby-link

J'essaie de styliser un <Link/> composant de gatsby-link package utilisant styled-components package Normalement, je crée simplement un const je lui donne un Name le fixe à styled.a par exemple et écris mon css. Cependant, lorsque je crée un const pour <Link/> J'ai un Duplicate declaration "Link" Erreur. Comment puis-je styliser un <Link> composant avec styled-components.

Voici mon code ci-dessous

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

Vous devriez pouvoir faire quelque chose comme:

import Link from 'gatsby-link';

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

// ...

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

@kadrian a la solution actuelle à jour pour cela, son exemple a fonctionné pour moi mais vous n'avez pas besoin de la syntaxe du tableau dans le lien fourni (juste pour éviter toute confusion).

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