On this page

cssx.union

union

Merges multiple conditional class names into one.
It also supports named export for use within className.

Something.tsx

"use client"
 
import elter, { union } from 'elter'
import { usePathname } from 'next/navigation'
 
const styleLink = elter.style({
  fontSize: '14px',
  color: 'var(--color-link)',
  textDecoration: 'none'
})
 
const styleActive = elter.style({
  fontWeight: 'bold',
  borderBottom: 'solid 2px skylbue'
})
 
export default function Page () {
  const pathname = usePathname()
 
  return(
    <Link href="/" className={union(styleLink, pathname === "/" ? styleActive : "")}>
        Home        
    </Link>
  )
}

This simplifies the syntax:

<div className={union(styles.link, styles.active)}>

The following is how it is written so far.

<div className={styles.link + ' ' + styles.active}>
<div className={`${styles.link} ${styles.active}`}>