这是一个创建于 358 天前的主题，其中的信息可能已经有所发展或是发生改变。
function ToggleButtonRemastered({ isEnabled, children }) { return ( <button className={clsx( isEnabled && "scale-110", "transition-transform duration-200 w-max text-xl" )} > {children} </button> ) } 和
function ToggleButtonClassicEdition({ isEnabled, children }) { return ( <button data-enabled={isEnabled} className="data-[enabled=truel:scale-110 transition-transform duration-200 w-max text-xl" > {children} </button> ) } 第 1 条附言 2025 年 1 月 23 日
两种各有好处吧
1. 更直观更符合 JS 概念
2. headless ui 使用的方式比较多，利用 tw-merge 来实现更加灵活的样式，调用的时候可以覆盖 data-attr 的样式
1. 更直观更符合 JS 概念
2. headless ui 使用的方式比较多，利用 tw-merge 来实现更加灵活的样式，调用的时候可以覆盖 data-attr 的样式
 | 1 nowtg 2025 年 1 月 22 日 via iPhone 简单易懂，降低项目复杂度 |
 | 2 FrankFang128 2025 年 1 月 22 日 用 tailwind 就行了，别折腾 |
 | 3 ltaoo1o 2025 年 1 月 22 日 建议第一种，我之前也是第二种写法，后面要在小程序实现相同的页面，代码改动比较多。 |
 | 4 donaldturinglee 2025 年 1 月 22 日 做项目用 clsx 或 classnames 这种样式拼接方便维护, 自己项目的话, 你喜欢哪种用哪种 |
 | 5 linkopeneyes 2025 年 1 月 22 日 第一种，简单直观是最好的 |
 | 6 wakarimasen 2025 年 1 月 22 日 第一种好吧，而且 className 类似的库不是应该可以这样写吗 clsx(br /> "transition-transform duration-200 w-max text-xl", { "scale-110": isEnabled } , ) |
 | 7 importmeta 2025 年 1 月 22 日 antd 和 mui 都是 clsx 这种形式 |
 | 8 fang2hou 2025 年 1 月 22 日 站第一种 |
 | 9 superedlimited 2025 年 1 月 23 日 via iPhone nextjs 教程里使用的是 clsx ，相信 vercel |
 | 10 rayi 2025 年 1 月 23 日 如果你的样式是使用 tailwind 这种方式添加的，那么选择第一种方式。 如果你是使用 css-modules 或者其他手动编码 css 的话，那么选择第二种方式。 |
 | 11 yjw06282 2025 年 1 月 23 日 第二种又难读, 又难看, 不知道什么有啥存在意义 |
| 12 yjw06282 2025 年 1 月 23 日 要是觉得 css 太长,. 可以提上去 ``` function ToggleButtonRemastered({ isEnabled, children }) { const css = isEnabled ? 'scale-110' : 'transition-transform duration-200 w-max text-xl' return ( <button className={css}> {children} </button> ) } ``` |
 | 13 okakuyang 2025 年 1 月 23 日 说句不好听的，我看不懂.... 我都是 className={ bool ? "xxx" : "xx" },楼主这样写有什么好处吗？ |
| 14 okakuyang 2025 年 1 月 23 日 或者 className={`xxx xx ${ bool ? "xx" : "" } ${ bool2 ? "xx": "" } `} |
 | 15 karott7 2025 年 1 月 23 日 第一种，可读性好太多 |
 | 16 qwas 2025 年 1 月 23 日 之前还有的争，现在毫无疑问 tailwind |
 | 17 Jtyczc 2025 年 2 月 18 日 肯定是第一种 |
Select Language