满足单个条件时，使用clsx添加两个className的正确语法是什么？

你当前写法的问题在于：clsx的对象语法中，键必须是单个类名字符串，不能直接用数组作为对象的键，所以['stroke-black','text-transparent']这种写法不会被正确解析。

以下是几种可行的正确写法：

写法1：多类名空格拼接作为对象键 #

直接把需要的两个类名用空格连成一个字符串，作为对象的键，对应同一个条件：

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

写法2：拆分独立键值对 #

把两个类名拆成两个独立的键值对，共用同一个判断条件：

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

写法3：结合clsx的数组语法 #

利用clsx支持数组参数的特性，直接在条件满足时传入类名数组：

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

clsx本身支持混合传入字符串、对象、数组等多种参数类型，你可以根据自己的习惯选择最清晰的写法。

内容的提问来源于stack exchange，提问作者Herma