如何用CSS移除Next.js导航栏中菜单元素的下划线

问题出在Next.js的<Link>组件会自动渲染原生<a>标签，而浏览器默认给<a>标签添加下划线样式，你目前的CSS仅针对.menu-items（即<li>元素）设置样式，没有覆盖内部<a>标签的默认样式。

直接在你的global.css中添加以下样式即可解决：

.menu-items a {
  text-decoration: none;
  color: inherit; /* 继承父元素的白色，避免a标签默认蓝色文字 */
}

修改后的完整global.css代码如下：

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.navigation {
  display: flex;
  justify-content: space-between;
}

.menu-items {
  list-style-type: none;
  display: inline;
  margin-right: 20px;
  background-color: coral;
  color: white;
  padding: 10px;
  border-radius: 3px; 
}

.menu-items a {
  text-decoration: none;
  color: inherit;
}

这样就能彻底移除菜单项的下划线，同时保证文字颜色和父元素一致。

内容的提问来源于stack exchange，提问作者Digvijay Singh Thakur