React Router Dom v6 - hover styles on active nav-CodePudding

I have a navbar that has a hover state as well as active nav styles. I'm trying to get my ACTIVE navlink to have a custom hover state as well. Right now the active styles are overriding the hover state. how do i maintain my hover state styles over the active nav link?

whats happening....

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>

stylesheet

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

I've tried...

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

CodePudding user response：

Move the "style" logic to the className prop and add the "active" class. The inline style attribute adds higher CSS specificity and overrides styles defined in your 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;
}

Note the the NavLink component already adds an "active" classname by default, so the link logic can be simplified to:

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

CodePudding user response：

That's because style props in NavBar overrides the hover state declarations.

Possible Solution would be remove the style prop and declare styles directly in .css file.

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