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

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

CodePudding user response：

If I understood your query correctly, then you got to do Interpolation (something like below as per your requirement):

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