styled components, with gatsby-link anchor tag css coloring : <p>I am trying to style a <code>&lt;Link/&gt;</code> component from <code>gatsby-link</code> package using <code>styled-components</code> package Normally I just create a <code>const</code> give it a <code>Name</code> set it equal to <code>styled.a</code> for example and write my css. However when I create a <code>const</code> for <code>&lt;Link/&gt;</code> I get a <code>Duplicate declaration "Link"</code> error. How do I style a <code>&lt;Link&gt;</code> component with <code>styled-components</code>.</p>

<p>Here is my code Below</p>

<pre><code>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 () =&gt; (
  &lt;Header&gt;
        &lt;Title&gt;
          &lt;Link to="/"&gt;
            Gatsby
          &lt;/Link&gt;
        &lt;/Title&gt;
  &lt;/Header&gt;
);
</code></pre>
