Get rid of link underline from gatsbyjs

user_7550592 0
Viewed 233

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.

gatsby reactjs javascript
2 Answers

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).

user_55853710

Yeah for some reason the default Link styling is a background-image (no idea) and box-shadow (also no idea), set them both to none and you should be right as rain.

user_25443050
Related