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

Question

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
}

Answer 1

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>

Answer 2

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
}