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