<buttonclassName={twMerge(buttonVariants({ size, variant }), className)}{...props}>完成！
需要注意的一点 —— class-variance-authority 方法制作可复用组件的最佳之处在于 ， 我们能够在应用程序的任何其他地方重用我们收到的函数，这就是为什么我们要导出它的原因 。在这里，最常见的用途可能是需要为某个 <a> 链接设置样式 ， 可以轻松实现：只需导入函数并定义类即可！
import { buttonVariants } from "./Button/Button";export default function App() {return (<><a className={buttonVariants({ size: "medium", variant: "filled" })}>中等大小填充链接！</a></>);}最后，如果您一直在跟随我的示例，您可能已经注意到，当我们在 cva 函数内编写类时，Tailwind 智能提示扩展不起作用 。这是因为它没有被训练去做这件事 —— 它只在我们编写类名和使用 @apply 样式时触发 。为了解决这个问题，我们可以稍微调整 settings.json 文件，添加以下行：
"tailwindCSS.experimental.classRegex": [["cva\(([^)]*)\)", "["'`]([^"'`]*).*?["'`]"]],
文章插图
【让你开发更舒适的 Tailwind 技巧】
推荐阅读
![『逆光奔跑前进』[双盟电子]，{pogopin}反钻孔结构与剖斜面结构的差异有哪些？](https://imgcdn.toutiaoyule.com/20200424/20200424222151354622a_t.jpeg)
- 如何清理垃圾让手机变得更流畅 清理手机垃圾的方法有哪些
- 挨饿和运动，哪种减肥方式更靠谱?
- 王者荣耀：最强打野教学，让你不再迷茫！
- 为什么站着更耗费体力
- 更的偏旁部首是什么 更的偏旁部首
- 周冬雨疑似微调，眼皮比以前更深了，脸颊更丰满，没有之前的气质
- cdr应该咋的才能更改尺寸
- TVB花旦陈茵媺自曝复出压力大，更拒绝再与老公合作，望孩子支持
- 如何预防口腔溃疡?这7种措施让你远离口腔溃疡!
- 如何更改打印机端口，如何添加打印服务器端口