Ant Design 5.0 发布了，身为顶级 UI 组件库自然有自己的排面，还搞了个发布会 (ಡωಡ)

更新点中样式相关引起了我的兴趣，它没有采用今年大量流行的基于 CSS 变量以支持样式定制化的需求，而是采用了 CSS-in-JS 的方案。

<ConfigProvider
    theme={{
        token: {
            colorPrimary: 'red'
        }
    }}>
    {children}
</ConfigProvider>

所以，现在来说如果想修改主题，修改 JS 变量即可，并且，提出了一个叫做 Design Token 的东西，即梯度颜色，看之前 v4 代码中经常出现的 fade(@block, 85%) 其实就是这个东西，这次把这个具体化了。

所以，如果你想基于 Ant Design 扩展自己的组件，比如业务组件中需要用到配色，那么可以使用 hook 去拿到对应 token 值，4.x 版本时曾短暂的提供过 CSS 变量的一个版本，再之前只能用 less.js 动态去编译，我之前的文章有提到过，为了实现样式可定制，写了个打包工具，将 less 变量注入，然后打包成 antd.css，现在就不用这样了，直接存 JSON 就可以实现不同客户不同样式的需求。

import React from 'react';
import { Button, theme } from 'antd';

const { useToken } = theme;

const App = () => {
  const { token } = useToken();

  return <Button style={{ backgroundColor: token.colorPrimary }}>Button</Button>;
};

export default App;

另外，从视频中提到了“快乐工作”关键字，配图是点击一个按钮，会出现“水溅跃”的效果，如下图，怎么说呢，有点想念那年的圣诞节了 (ಡωಡ)

v5 相比 v4 从使用上差别没多大，不像 v4 使用了 hook 所以相比 v3 有很多 breaking change，基本都是一些 API 的统一，比如 visible -> open 之类的 API 名称修改。其他还有许多内容，不过基本都是讲设计的了，毕竟 Design 才是主题曲。

忽然又想起阿里在某些网站发布的有关低代码的文章，各种玄学啊哲学反正很多很多概念，各种设计思想写了很多很多超级超级长的文章，就是不见一行代码，相比起来 Ant Design 真是良心之作啊。