Gatsby: Link's background color is white

[RidanDev]

Hi there! 👋

I've been following the Gatsby official tutorial lately and I noticed a white background color using the Link component.
It turns back to normal when I put the cursor over it.

I don't have any particular CSS file that can be related to that, but I'm using Gatsby's typography plugin.

Here's a screenshot.

Thanks in advance!

[sidharthachatterjee]

As far as I know, we don't style the background colour of the Link component but I'm not sure 🤔

Could you please link to a minimal reproduction of this, @RidanDev?

[musabdullah0]

I'm having the same issue on my own website: http://musababdullah.surge.sh

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[DSchau]

@musabdullah0 it's because there is a style applying to all a tags that is being picked up because gatsby-link renders an a tag!

color: #1ca086;
    text-decoration: none;
    text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, #1ca086 1px, #1ca086 2px, rgba(0, 0, 0, 0) 2px);
}

In the absence of a reproduction, I'm going to assume this is something with a particular plugin/global css file/etc. We don't provide _any_ style at all for gatsby-link, so this seems likely to be something else that is causing this style to take effect.

Please reply or re-open if we can help further--thanks!

[eclectic-coding]

@RidanDev I just saw this one but this is how I worked around the problem. This works if you are using typography.js and in my case the fairyGatesTheme:

fairyGatesTheme.overrideThemeStyles = () => ({
  a: {
    color: #YourColorHere,
    textDecoration: "none",
    backgroundImage: "none",
    textShadow: "none",
  },
})

Hope this helps.

[imthatalex]

If anyone else is still experiencing this issue, I found a simple solution to the problem that can be extrapolated from @eclectic-coding's example.

If you simply create a seperate css.modules stylesheet and input his styling to the link directly it should remove the white background effect. I believe it's just the text-shadow + background-image causing the issue.