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

124 views Asked by At

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

There are 1 answers

0
Wongjn On BEST ANSWER

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>