React - 无法使用 css 模块设置 React 路由器导航链接的活动状态

Question

目标

我正在尝试使用 css 模块将样式应用于边栏中的活动路径，但是我想保留基本样式（分配 2 类）

我试过这个代码

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

但它编译为 A snapshot of the css compiled code in devtools

我正在使用 CSS 模块、React Router V6

Answer 1

如果我正确理解了你的查询，那么你必须正确使用三元运算符（根据你的要求，如下所示）：

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

React - 无法使用 css 模块设置 React 路由器导航链接的活动状态

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

css

reactjs

react-router

react-router-dom

目标