React - Can't style the active state of a react router navlink with css modules

user_13356777 0
Viewed 145

Goal

I'm trying to apply styles to the active route in a sidebar using css modules, however i wanna keep the base styles (assigning 2 classes)

I've tried this code

   <NavLink
      to={path}
      className={`
       ${classes.nav_link} ${({ isActive }) =>
        isActive ? classes.active : classes.nav_link}
        }
      `}
    >

But it compiles to A snapshot of the css compiled code in devtools

I'm using CSS modules, React Router V6

react-router-dom react-router reactjs css
1 Answers

If I understood your query correctly, then you got to use ternary operator properly (something like below as per your requirement):

<NavLink
  to={path}
   className={({ isActive }) =>
    isActive ? classes.active : classes.nav_link
  }
>
user_69389690
Related