styled components, with gatsby-link anchor tag css coloring

Rename the Link import.

import { Link as GatsbyLink } from "gatsby";

If you name your component Link you might encounter naming collisions because that name is so ubiquitous among different frameworks. The error you describe points out that you have more than one component with the same name.

Name your components explicitly (adapted from @Fabian Schultz's answer):

import { Link as GatsbyLink } from "gatsby";

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

// ...

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

You should be able to do something like:

import { Link } from 'gatsby';

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

// ...

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

---

Outdated version (gatsby v1, styled-components v3):

import Link from 'gatsby-link';

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

// ...

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