React Bootstrap中NavDropdown的id绑定到a元素而非外层div如何解决

问题原因 #

React Bootstrap 的 NavDropdown 组件默认属性分配逻辑为：直接传入组件的 id、className 会绑定到内部的下拉触发 a 标签上，你需要控制的外层导航项容器元素，对应的专属属性是 itemId、itemClassName，这是样式不生效的核心原因，和 CSS Modules 的写法无关。

解决方案 #

修改 NavDropdown 组件的属性传入规则，把原本直接传的 className、id 替换为外层容器对应的属性即可：

<NavDropdown
  // 替换原本的 className、id 属性
  itemClassName={styles.naviDropdown}
  itemId="navigationDropdown"
  // 其余原有属性保持不变，如 title、eventKey 等
  title="下拉菜单"
  ...
>
  {/* 下拉项原有内容 */}
</NavDropdown>

修改后你之前编写的 CSS 不需要调整，就能正常作用到外层容器上，实现桌面端下拉菜单右对齐、移动端左对齐的预期效果。

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