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

Question

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

发生了什么....

活动导航样式（看起来不错）

当我将鼠标悬停在活动导航栏上时（希望文本为白色）

                <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
}

Answer 1

那是因为 NavBar 中的 style 道具覆盖了悬停状态声明。

可能的解决方案是删除 style 属性并直接在 .css 文件中声明样式。

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

a.nav-link.active {
    color: #0E1333;
    border-bottom: solid 2.5px #0E1333;
    padding-bottom: 2.5em;
}

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

Answer 2

将“样式”逻辑移至 className 道具并添加“活动”class。内联 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 组件已经默认添加了 "active" class 名称，因此 link 逻辑可以简化为：

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

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

React Router Dom v6 - hover styles on active nav

css

navbar

reactjs

react-router-dom