clsxclsx定义 clsx是一个轻量级的实用库，用于管理CSS类的应用。 clsx使用示例：字符串-简单拼接对象

clsx定义

clsx是一个轻量级的实用库，用于管理CSS类的应用。

npm install --save clsx

clsx使用示例：

字符串-简单拼接

import clsx from 'clsx'
const classNames = clsx("name1","name2")
console.log(classNames) //name1 name2

对象-条件类名

const isActive = true
const classNames = clsx("name1",{"active":isActive})
console.log(classNames) // name1 active

数组

const isActive = true
const isBold = false
const classNames = clsx(['name1',{'bold':isBold},{'active':isActive}])
console.log(classNames) // name1 active

字符串模板替换

const color = 'red'
const classNames = clsx('name1',`color-${color}`)
console.log(classNames) // name1 color-red

Next.js中使用clsx的例子：

export default function Page({status}:{status:string}){
 return (
  <div 
    className={clsx(
    'flex items-center px-2 py-1',
    {
     'bg-gray-100 text-gray-500':status === 'pending'
     'bg-green-100 text-white':status === 'paid'
    }
    )}
  >
  
  </div>
 )
}