用法
用于 variants、active 状态、tone props 与布局标记。
- 始终从 @quan-erp/shared-ui 导入 cn
- 不要用模板字符串拼接 className
- 不要从其他包导入 clsx / tailwind-merge / cn
TSXcn
1import { cn } from "@quan-erp/shared-ui";
2
3<div
4 className={cn(
5 "inline-flex items-center rounded-full border border-border p-0.5",
6 tone === "on-dark" ? "border-white/15 bg-white/10" : "bg-muted",
7 )}
8/>
9
10<button
11 className={cn(
12 "flex h-8 w-8 items-center justify-center rounded-full transition",
13 active && "bg-background text-foreground",
14 !active && "text-muted-foreground hover:text-foreground",
15 )}
16/>错误写法
TSXincorrect
// Do not do this
className={`inline-flex border p-0.5 ${tone === "on-dark" ? "bg-white/10" : "bg-muted"}`}