C 端的 Button 组件要怎么封装？

[justdoit123]

我感觉不止是 Button 组件，C 端的 UI 组件真的很难封装。拿 Button 来说：

我接手项目前，Button 是椭圆圆角的，并且可控度不够高。姑且称之为，ButtonV1

后来设计师 A 说，要改成小圆角的，字重要 Semibold 的，没有 padding 等等，我封装了一个新版本，并且改进了可控度。称之为，ButtonV2 。但实际用起来的时候，已经觉得很怪。给的设计稿，button 经常长得有细微差别。一会是 Semibold 的字重、一会是 Bold ； padding 也很不一样，没有一个定律。搞得最后，有封装跟没封装一样。

再后来设计师 A 离职了，设计师 B 接手了。给的设计稿又是另一个风格，回到了最初的椭圆圆角系。用 ButtonV2 要写更多的覆盖样式。


我不知道各位怎么封装这种变化多端的组件的？

[NerbraskaGuy]

本质是没有统一的设计规范吧，UI 按照自己的习惯来设计的话前端样式没法复用很正常，像 antd 那种框架虽说能实现组件各种自定义样式，但是也是在规定的范围内变的

[justdoit123]

@NerbraskaGuy antd 那种适用于后台系统我知道。toC 场景下，这种“样式没法复用很正常”真的是常态吗？ T_T

[xxmym]

本质上是 ui 水平不行，设计不光要好看更要克制。尽量制定设计规范吧

[hexi1997]

说下我这边的解决方案，使用 tailwindcss+classname ，button 只封装基本样式的 flex item-center justify-center hover:opaction-75 。然后使用的时候通过 className 参数传递 w-[xxx] h-[xxx] rounded-[xxx] font-[xxx] text-[xxx]。当然 button 也可以自定义默认的 宽高、圆角。通过 !w-[xxx] 覆盖即可。