Get rid of link underline from gatsbyjs

Question

In https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/ (see source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark ), the links don't have an underline, while in my blog https://yiksanchan.com (see source code https://github.com/YikSanChan/yiksanchan.com ), all links come with an underline.

Why? And how can I get rid of the underlines? I have found a related StackOverflow question Links have an additional underline in gatsby but what I try to understand is, how does the using-remark example solve the underline problem without overriding the box-shadow props.

---

Following Ferran's solution, in my typography.js, I changed

Wordpress2016.overrideThemeStyles = () => {
  return {
    "a.gatsby-resp-image-link": {
      boxShadow: `none`,
    },
  }
}

into

Wordpress2016.overrideThemeStyles = () => {
  return {
    "a.gatsby-resp-image-link": {
      boxShadow: `none`,
    },
    "a": {
      boxShadow: `none`,
    },
  }
}

to remove the underlink.

Answer 1

Your typography.js file is adding a box-shadow to all <a> elements:

a {
    box-shadow: 0 1px 0 0 currentColor;
    color: #007acc;
    text-decoration: none;
}

If you want to get rid of that styling, just remove the rule of box-shadow property (if it's not a module). If it's a package, just override the styling with another style file (SCSS, CSS, or JS).

Answer 2

是的，出于某种原因，默认的链接样式是背景图像（不知道）和框阴影（也不知道），将它们都设置为无，您应该像下雨一样。