css - 即使在文本装饰后链接仍保留下划线 :none

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 插件相关的全局样式。