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