React-Scroll Link组件导航栏样式问题：hover缩放效果失效

问题根源 #

react-scroll的Link组件默认渲染为inline类型的<a>标签，而CSS的transform属性对inline元素不生效——这就是你设置的scale(1.1)hover效果无效的核心原因，而普通div是block元素，所以效果正常。

解决方案 #

修改CSS，为.navbar-item添加display: inline-block（或block，根据你的布局需求调整），让元素支持transform属性：

.navbar-item {
  transition: all 0.3s ease;
  display: inline-block; /* 关键：将元素转为inline-block，使transform生效 */
}

.navbar-item:hover {
  transform: scale(1.1);
}

如果上述方法仍存在样式冲突，可以尝试增加选择器权重，明确针对Link渲染出的a标签设置样式：

a.navbar-item {
  transition: all 0.3s ease;
  display: inline-block;
}

a.navbar-item:hover {
  transform: scale(1.1);
}

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