本文正在参与「金石计划 . 分割6万现金大奖」
周五了，这周忙里偷闲去了两天桐庐，冷季加上工作日，人好少。并且作为一个规范的江南小城，山青水秀，慢日子的基调就会让人整个松弛下来，即使就简略的在酒店邻近走走，就已经是很舒服了。
好了，闲话少说，昨天antd正式发布了5.0版别，笔者是antd重度用户，公司的B端业务组件便是根据antd定制开发的，在5.0发布之前，也在一直在重视beta版别，让我们一同看看5.0在技术上引入了什么新的变化吧
本文不对设计的变化做点评，仅在技术选型、工程化等技术视点进行分析
css-in-js
antd动态主题运用了css-in-js计划，抛弃了一直以来的less，抛弃了css variables才能，这算是5.0引入的最大变化了，提到css-in-js旧不得不说最近关于css-in-js的一些争议
css-in-js争议
最近由于Sam的那篇Why We’re Breaking Up with CSS-in-JS，直接将css-in-js推到了风口浪尖上，其实这个时分发布了强依靠css-in-js的5.0多少有些尴尬，官方也没有对这个问题进行过多的阐明，只是复述了一下运用场景
归根到底，仍是Sam这篇文章写的太客观，作为Emotion首要开发者，对css-in-js的有着更深的了解，很客观的阐明了计划的优缺点，最后抛出弃用css-in-js最中心的原因：功能问题，这一点是无解的，css-in-js需求在react重烘托组件时序列化className，这就不可避免地带来运行时的功能丢失
现在作者运用的计划是css module，除了在css中直接运用js变量需求特定的方法兼容外，其他css-in-js提供的有点，都能够直接兼容，并且没有功能的丢失，这应该便是作者弃用css-in-js的中心原因了
ant design 5.0用css-in-js做了什么
对于动态定制主题而言，关键也是在于如安在功能和维护成本之间做取舍，css-in-js计划能够直接在款式中运用js变量，这对定制主题而言的确能够省掉一些模版代码。and design 5.0运用了@ant-design/cssinjs作为自己的css-in-js计划，打开文档去看看，官方说法也很明确
It’s a subset of Emotion with design token logic wrapper.
是根据Emotion定制了一部分才能的，直接依靠了@emotion/hash, @emotion/unitless，文档上也直接推荐运用Emotion，而@ant-design/cssinjs经过牺牲动态性来获取更高的缓存功率，然后减少运行时的功能损耗，@ant-design/cssinjs提供的DerivativeToken才能也是这一版别一个亮点，能够简化一些动态主题的装备，会在下一节进行介绍
别的运用了css-in-js后，天然支持TreeShaking，不需求再装备插件了
Design Token
在ant design v4版别是，笔者阅历的运用antd的ToB项目中，许多是需求主题定制的,需求动态主题的当地现在首要仍是界说css变量的方法，比如：
color: var(--color);
经过将--color挂在到:root的方法，进行动态主题装备，在v5版别的介绍中，经过Design Token 模型能够派生出几乎一切需求定制的颜色、间距、巨细等。且使用上文提到的css-in-js计划，也不再需求和v4一样界说一堆挂在到:root上的变量了，的确简化了许多动态主题的装备，这儿贴上一张官方的配图
除了全体的可定制，各个组件也能够经过外层的装备来实现款式定制才能,这儿就贴一下官方的demo
<ConfigProvider
theme={{
components: {
Radio: {
colorPrimary: '#00b96b',
},
},
}}
>
<Radio>Radio</Radio>
<Checkbox>Checkbox</Checkbox>
</ConfigProvider>
总结
作为antd的深度用户，笔者也会渐渐将自己根据antd的内部组件库渐渐开始晋级，现在来看相对痛点的便是自界说主题的晋级，由于很难复用旧的逻辑，这点需求先使用v5的才能，保留旧的计划，渐渐替换为design token的方法；别的，仍是需求观察一下css-in-js的功能，虽然是B端项目，用户体验上也是不能打折。
参考资料 Ant Design 5.0 正式发布
本文正在参与「金石计划 . 分割6万现金大奖」
