React Router Dom v6 - 活动导航上的悬停样式

我有一个具有悬停状态和活动导航样式的导航栏。我正在尝试让我的活动导航链接也具有自定义悬停状态。现在，活动样式正在覆盖悬停状态。如何在活动导航链接上保持悬停状态样式？

发生了什么....

active nav styles (looks good)

when i hover over the active nav (want the text to be white)

                <NavLink
                    to="/games"
                    className='nav-link'
                    style={({ isActive }) =>
                        isActive
                            ? {
                                color: '#0E1333',
                                borderBottom: 'solid 2.5px #0E1333',
                                paddingBottom: 2.5
                            }
                            : {}
                    }
                >
                    <img src={require('../../assets/icons/gamesIcon.png')} id='projects-icon' />
                    Games
                </NavLink>

样式表

.nav-link {
  text-decoration: none;
  background-color: white;
  color: #0E1333;
  font-family: 'Gilroy-ExtraBold';
  font-size: 18px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-left: 25px;
  padding-right: 25px;
}

.nav-link:hover {
  background-color: #0E1333;
  color: #fff;
}

我试过了...

a.nav-link.active:hover {
  color: white
}

将“样式”逻辑移至className道具并添加“active”类。内联style属性添加了更高的 CSS 特异性并覆盖 CSS 中定义的样式。

<NavLink
  to="/games"
  className={({ isActive }) =>
    ["nav-link", isActive ? "active" : null]
      .filter(Boolean)
      .join(" ")
  }
>
  <img src={require('../../assets/icons/gamesIcon.png')} id='projects-icon' />
  Games
</NavLink>

CSS

.nav-link {
  text-decoration: none;
  background-color: white;
  color: #0E1333;
  font-family: 'Gilroy-ExtraBold';
  font-size: 18px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-left: 25px;
  padding-right: 25px;
}

.nav-link:hover, .active:hover {
  background-color: #0E1333;
  color: #fff;
}

.active {
  color: #0E1333;
  border-bottom: solid 2.5px #0E1333;
  padding-bottom: 2.5rem;
}

请注意NavLink成分already添加一个"active"默认为classname，因此链接逻辑可以简化为：

<NavLink to="/games" className="nav-link">
  <img src={require('../../assets/icons/gamesIcon.png')} id='projects-icon' />
  Games
</NavLink>