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

5 小时 54 分钟前
 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>
  )
}
394 次点击
所在节点    React
9 条回复
liuw666
5 小时 17 分钟前
简单易懂，降低项目复杂度
FrankFang128
5 小时 7 分钟前
用 tailwind 就行了，别折腾
ltaoo1o
5 小时 3 分钟前
建议第一种，我之前也是第二种写法，后面要在小程序实现相同的页面，代码改动比较多。
donaldturinglee
4 小时 56 分钟前
做项目用 clsx 或 classnames 这种样式拼接方便维护, 自己项目的话, 你喜欢哪种用哪种
sjhhjx0122
4 小时 56 分钟前
第一种，简单直观是最好的
angrylid
4 小时 54 分钟前
第一种好吧，而且 className 类似的库不是应该可以这样写吗
clsx(
"transition-transform duration-200 w-max text-xl",
{ "scale-110": isEnabled } ,
)
importmeta
4 小时 51 分钟前
antd 和 mui 都是 clsx 这种形式
houshuu
4 小时 25 分钟前
站第一种
superedlimited
31 分钟前
nextjs 教程里使用的是 clsx ，相信 vercel🤖

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/1107170

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX