即使在文本修饰后，链接仍保留下划线：无

Question

我正在为通过 GatsbyJS 制作的网站制作导航栏。我试图在导航栏中设置链接的样式，使它们没有下划线。

我已经将链接设置为没有任何文本装饰——当我在浏览器中检查元素时，它甚至显示“文本装饰：无”属性。我也确认我的CSS影响了对象——我可以改变文本的颜色，例如，我不能影响的只是文本装饰。

CSS：

.nav {
  background: #fd8;
}

.nav ul {
  text-align: center;
  border: 1px solid #000;
}

.nav ul li {
  display: inline-block;
  padding: 8px 10px;
  margin: 0;
}

.nav ul li a {
  color: #221;
  text-decoration: none;
}

html + js：

...
import { Link } from "gatsby"
import styles from "./navbar.module.css"

...

      <nav className={styles.nav}>
        <ul>
          <li>
            <Link style={{ textDecoration: 'none' }} to="/about">
              About
            </Link>
          </li>

编辑：带有 textDecoration 的内联样式是我在发布此问题之前所做的一些摆弄的产物，直到最近才出现。删除它对问题没有影响。

按请求呈现的 HTML：

<nav class="navbar-module--nav--25Dcz">
  <ul>
    <li>
      <a href="/#">About</a>
    </li>
    ...
  </ul>
</nav>

Answer 1

我发现错误的下划线实际上是一个 1px 的框阴影，可能来自某些我找不到与 Gatsby Typography 插件相关联的全局样式。