Question

在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`,
    },
  }
}

删除下链接。

Answer 1

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

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

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

Answer 2

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

摆脱gatsbyjs的链接下划线

2 个答案: