React Router Dom v6 - hover styles on active nav

user_10252506 0
Viewed 493

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) enter image description here

when i hover over the active nav (want the text to be white) enter image description here

                <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
}
navbar react-router-dom reactjs css
2 Answers

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>

Edit react-router-dom-v6-hover-styles-on-active-nav

user_86908570

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