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

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

cssreactjsreact-routerreact-router-dom


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions