title: styled components, with gatsby-link anchor tag css coloring
body: <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>