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>
  )
}
举报· 927 次点击
登录 注册 站外分享
8 条回复  
liuw666 小成 2 小时前
简单易懂,降低项目复杂度
FrankFang128 小成 2 小时前
用 tailwind 就行了,别折腾
ltaoo1o 初学 2 小时前
建议第一种,我之前也是第二种写法,后面要在小程序实现相同的页面,代码改动比较多。
donaldturinglee 小成 2 小时前
做项目用 clsx 或 classnames 这种样式拼接方便维护, 自己项目的话, 你喜欢哪种用哪种
sjhhjx0122 小成 2 小时前
第一种,简单直观是最好的
angrylid 小成 2 小时前
第一种好吧,而且 className 类似的库不是应该可以这样写吗 clsx( "transition-transform duration-200 w-max text-xl", { "scale-110": isEnabled } , )
importmeta 初学 2 小时前
antd 和 mui 都是 clsx 这种形式
houshuu 小成 1 小时前
站第一种
返回顶部