React 组件样式的实现方式哪种更好？ 大家都发表一下意见么

[huijiewei]

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. 更直观更符合 JS 概念
2. headless ui 使用的方式比较多，利用 tw-merge 来实现更加灵活的样式，调用的时候可以覆盖 data-attr 的样式

[liuw666]

简单易懂，降低项目复杂度

[FrankFang128]

用 tailwind 就行了，别折腾

[ltaoo1o]

建议第一种，我之前也是第二种写法，后面要在小程序实现相同的页面，代码改动比较多。

[donaldturinglee]

做项目用 clsx 或 classnames 这种样式拼接方便维护, 自己项目的话, 你喜欢哪种用哪种

[sjhhjx0122]

第一种，简单直观是最好的

[angrylid]

第一种好吧，而且 className 类似的库不是应该可以这样写吗
clsx(
"transition-transform duration-200 w-max text-xl",
{ "scale-110": isEnabled } ,
)

[importmeta]

antd 和 mui 都是 clsx 这种形式

[houshuu]

站第一种

[superedlimited]

nextjs 教程里使用的是 clsx ，相信 vercel🤖

[rayi]

如果你的样式是使用 tailwind 这种方式添加的，那么选择第一种方式。
如果你是使用 css-modules 或者其他手动编码 css 的话，那么选择第二种方式。

[yjw06282]

第二种又难读, 又难看, 不知道什么有啥存在意义

[yjw06282]

要是觉得 css 太长,. 可以提上去

```
function ToggleButtonRemastered({ isEnabled, children }) {

const css = isEnabled ? 'scale-110' : 'transition-transform duration-200 w-max text-xl'
return (
<button className={css}>
{children}
</button>
)
}
```

[okakuyang]

说句不好听的，我看不懂.... 我都是 className={ bool ? "xxx" : "xx" },楼主这样写有什么好处吗？

[okakuyang]

或者
className={`xxx xx ${ bool ? "xx" : "" } ${ bool2 ? "xx": "" } `}

[karott7]

第一种，可读性好太多

[qwas]

之前还有的争，现在毫无疑问 tailwind