Search code examples
next.jstailwind-cssmenubarclassnameclsx

What's the syntax of clsx to add two classNames when one condition satisfied?

I have a menu block, i use clsx lib for the conditional classname rendering. I wanna add two className at the same line when the condition satisfies. Some one can tell me the right syntax ? For now i put the two classes into an array, but it doesn't work...

Thank you.

export default function Navbar({}){
...
 return (
    <li key={link.label} 
        className={
                 clsx({ 
                    ['stroke-black','text-transparent']: link.label==='HelloAgain',
                  })
    }>
         <Link href='#'>
            {link.label}
         </Link>            
    </li>
   )
}
Solution

  • Have all the classes in a object key in a single string, separated by spaces.

    const classes = clsx({
  'stroke-black text-transparent': true,
});

console.log(classes);
    <script src="https://unpkg.com/[email protected]/dist/clsx.min.js"></script>