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

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>
  )
}

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

用 tailwind 就行了，别折腾

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

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

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

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

antd 和 mui 都是 clsx 这种形式

站第一种

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