React-Bootstrap组件:hover伪类无需!important生效的实现方案

React-Bootstrap 自定义样式可通过引入对应类、提升CSS选择器优先级，或是添加span标签的方式实现需求，本次场景的解决方案如下：

CSS 代码 #

a.text-white.nav-link span:hover {
  color: black;
}

NAV.LINK 组件代码 #

<Nav.Link className="text-white" as={Link} to="/book">
   <span>Book</span>
</Nav.Link>

原有问题 #

我尝试为部分React-Bootstrap元素设置hover效果时，直接通过类名选择必须添加!important样式才能生效。最初我甚至无法修改目标文本的颜色，后续才定位到原因是React-Bootstrap自带的text-white类优先级更高。
请问有没有方案可以在CSS文件或是行内样式中使用:hover，无需加!important即可实现「Find Booking」「Book」等文本的黑色悬停效果？

原有相关代码如下：

<Navbar.Collapse id="basic-navbar-nav">
      <Nav className="ml-auto">
        <Nav.Link id="find" href="find" className="text-white">
          Find booking
        </Nav.Link>

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