去掉 gatsbyjs 中的链接下划线答案

【问题标题】：Get rid of link underline from gatsbyjs去掉 gatsbyjs 中的链接下划线
【发布时间】：2020-10-29 08:09:05
【问题描述】：

在https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/（参见源代码https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark）中，链接没有下划线，而在我的博客https://yiksanchan.com（参见源代码https://github.com/YikSanChan/yiksanchan.com）中，所有链接都带有下划线。

为什么？我怎样才能摆脱下划线？我发现了一个相关的 StackOverflow 问题 Links have an additional underline in gatsby，但我试图理解的是，using-remark 示例如何在不覆盖 box-shadow 道具的情况下解决下划线问题。

按照 Ferran 的解决方案，在我的typography.js 中，我进行了更改

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

进入

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

删除下链接。

【问题讨论】：

标签： javascript reactjs gatsby

【解决方案1】：

您的typography.js 文件正在向所有<a> 元素添加box-shadow：

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

如果您想摆脱这种样式，只需删除 box-shadow 属性的规则（如果它不是模块）。如果它是一个包，只需使用另一个样式文件（SCSS、CSS 或 JS）覆盖样式即可。

【讨论】：

【解决方案2】：

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

【讨论】：