千峰HTML5大前端面授2022年9月Vue3.0完结-山气日夕佳飞鸟相与还

浅谈antd@5运用心得

千峰HTML5大前端面授2022年9月Vue3.0完结

download：https://www.zxit666.com/5638/

antd v5版本发布至今已有整整4个月了，在v5版本发布后我也是第一时间把之前v4项目迁移到了v5，关于此次晋级还是有很大的变化跟改良的，故在此浅聊一下我的迁移阅历和倡议，前提是你曾经通读过官方的迁移指南。

严重改良

除了 ui 作风变化、更好的支持 Typescript、优化底层库的依赖等，我觉得此次大版本更新带来最大的变化是 CSS-in-JS 替代本来 less 的技术计划变卦。升至v5后 antd 产物不再导出 css 文件，只要一个 reset.css ，况且这个重置款式文件也只是为了让开发者不再去依赖其他的诸如 Normalize.css 的第三方库。

为什么说这是一次严重改良？做过 antd 切换主题功用的开发者应该深有领会，。流程是先提早编译出来每种形式下的对应 less 文件，然后经过包裹 antd 提供的 ConfigProvider ，依据 mode 的变幻动态传值修正 prefixCls 的值以动态修正组件内的款式，这样做有以下几种弊端：

每加一种主题就要编译一套less，虽然有很多反复的款式代码。

使得项目打包后的体积变得越来越臃肿。

维护起来十分费力，由于每改一个 antd 组件的通用款式就要同时去修正每套主题下的 less 文件对应的相同代码，虽然他们只要 prefixCls 不同。

修正款式要格外注重款式权重问题，加重了开发者的心智担负。

修正主题可能会破费更多的时间和写更多的代码，由于开发者需求去找到修正款式的元素的dom层级，然后在款式文件中为了权重问题需求写 full path。

...（我没阅历过的其他问题）

而采用 CSS-in-JS 这样的技术计划则会大大改善以上问题的呈现：

首先它是一种将 css 代码写成 JavaScript 对象或函数的办法，因而能够经过运用变量、函数等动态生成款式，便当响应式设计。

并且相比 less 它作用域控制更容易，因而很好的处理了命名抵触和款式权重的问题。

在一定水平上他处理了一局部性能优化的问题，由于减少了恳求 css 款式文件的 http 恳求。

迁移指南

假如项目中没有除了黑夜\白昼形式以外的其他主题，并且没有适配 IE 阅读器的需求，那么祝贺你，迁移此项目的本钱将是十分轻量级的，直接 yarn add antd 晋级库版本，移除 v4 项目中援用到的 antd 内置的文件（antd/dist/antd.css），之前在 less 文件中经过 :global 去修正 antd 组件默许款式的行为同样会生效，假如之前做了主题切换功用的项目同样也能够把之前的主题款式文件删了，antd 内置了白昼（default）、黑夜形式和紧凑形式的算法（algorithm）。这个 algorithm 在表现上来看能够了解为作风或者主题吧。那假如要修正单个组件的款式，比方antd 按钮默许高度为32，在某个业务场景下，这个按钮需求改成40，那么能够修正主题中的 token 去完成这一目的而不用去修正款式文件，这个 token 怎样了解？能够看成是组成一个组件的每个颗粒化的款式，也就是一些款式变量名而已。

那么，为什么修正 、token 的计划会比之前修正款式文件的计划要更优

那如何完成更多的自定义主题呢？其实思绪跟v4是一样的，修正款式变量值，只不过在v5中是经过修正js变量，而在以前的版本是修正 less 变量，详细完成办法能够参考 antd v5 版本中 default（对应源码 components/theme/themes/default(或者dark)），实质上是覆写变量值，只是变量名需求逐个对应起来。

开发时运用技巧

运用v5版本这么长时间以来，除了在 nextjs 项目中最初版本会有水合问题以外，最大的问题就是你想去修正某个组件的某个部分款式，但是不晓得对应的变量名，我的倡议是 clone 一份 antd 最新版本的源码，在不晓得变量名（token）的时分去源码中 components 目录下找到你要的组件，然后找到其下的 style 目录，找到对应款式下它援用的 token 属性名，以 Button 组件的背风光为例：

那么，修正 colorBgContainer 就ok了：

<ConfigProvider

theme={{

token: {

colorPrimary: '#FF9B50', // 主题色

colorBgContainer: '#FF9B50' // 写在这里跟写在下面都一样

},

components: {

Button: { controlHeight: 50, colorBgContainer: '#FF9B50' }

}

}}

>

<Button className={styles.btn} onClick={handleDeposit}>

<span style={{ color: '#fff' }}>

{isConnected ? `Deposit 3 ETH` : 'Unlock WalletConnect'}

</span>

</Button>

</ConfigProvider>

假如你只是针对某个业务场景下的某个组件修正部分款式，倡议写在 components 下，假如是某个模块中通用的款式，则选择 token，实质上都是修正 token，只是划分区域更细致化而已。