CSS样式无法应用于React Router的Link组件问题排查

原因 #

React Router的<Link>组件在浏览器中渲染后，本身就是一个<a>标签，你给<Link>添加的nav-item类会直接挂载到这个<a>标签上，而非存在.nav-item容器嵌套<a>的结构。你原CSS选择器.nav-item > a是在查找.nav-item的直接子元素<a>，但实际DOM结构里.nav-item就是<a>标签本身，导致选择器匹配不到目标元素，样式无法生效。

解决办法 #

直接将CSS选择器改为.nav-item即可，因为该类已经直接作用在<a>标签上：

.nav-item {
  background-color: #0958f6;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

如果后续需要将<Link>放入容器（比如用<div className="nav-item">包裹<Link>），那原.nav-item > a选择器才会生效，但当前DOM结构无需此操作。

内容的提问来源于stack exchange，提问作者Art Vandalay