shadcn/ui中cn函数的使用

shadcn/ui示例中常见cn函数的使用，作用于合并className，多用于动态传递的className与静态className之间合并或三目运算符条件判断的className与其它className合并。

CN函数定义：

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
1
2
3
4
5
6

动态传递的className与静态className之间合并

例如page.js中使用自定义的AppAside组件，传递了className参数

<AppAside className="hidden lg:block"/>
1

AppAside.tsx中可以使用cn函数来合并参数中className和静态的className

async function AppAside(props:{className:any}) {
  return (    
    <aside 
      className={cn("fixed top-0 bottom-0 z-10 w-64 border-r-gray-200 dark:border-r-gray-700 border-r p-3 box-border aside-pt", props.className)} 
      >
      ...
    </aside>
  )
}
export default AppAside
1
2
3
4
5
6
7
8
9
10

使用三目运算符来组合class

<Check
  className={cn(
    "mr-2 h-4 w-4",
    value === framework.value ? "opacity-100" : "opacity-0"
  )}
/>
1
2
3
4
5
6