史上最简单的Ant-Design换肤方案

先看成果

线上预览地址：Dynamic-Antd-Theme-Demo

看起来是不是还可以，如果你知道如何使用，相信你会更觉得我不是一个标题党。

// 如何使用
import DynamicAntdTheme from 'dynamic-antd-theme';

render() {
    ...
    <DynamicAntdTheme />
    ...  
}
复制代码

没错，就是这么简单，为了方便大家，我已经弄成了即插即用的组件～欢迎大家star + issue + pr。dynamic-antd-theme

为什么要做ant-design的换肤方案

这里是我很想说的，我还没有自负到或者说贪心到有能力去实现一个完美的合理的antd动态换肤方案。比如开源社区里的antd-theme-webpack-plugin和antd-theme-generator就是很成熟的方案，利用webpack的方式在页面里通过引入less.js实现动态换肤，换的很彻底。

那么为什么我还要来搞一个所谓的动态换肤呢？理由如下：

• 首先，上面两个方案并不能覆盖所有的场景，他所需要的入口文件index.html，作为nextjs党的我，就怎么找也找不到，所以在我的nextjs脚手架项目里就没有配置成功。
• 其次，个人认为配置以及使用稍微繁琐以及额外引入太多内容。html文件必须引入less.js文件，因为这样才能使用window.less对主题进行动态更换。还有配置的时候各种css文件也是不太清楚意义。
• 最后，也是最重要的。有人在我的文章里提问了，也就是与Next-Antd-Scaffold这个脚手架相关的文章，感兴趣的可以去看看前面我写的文章。小伙伴没有配置成功，又没有思路，怎么办呢，作为热心作者，肯定要帮忙解决呀～

这里安利一波，Next-Antd-Scaffold目前已经基本开发完成了，我个人也在用这个架子写项目，有很多小伙伴也在写项目，应该还可以，对Nextjs感兴趣的同学可以加入文章底部的微信群一起沟通哦～最主要的，你给我一个star，我尽心尽力尽我所能解决问题，?

综上所述，个人花费了周末的时间，搞出来一个即插即用的antd换肤方案，一键安装直接使用。当然了，既然是这么简单，肯定也有弊端，毕竟我的主题是最简单的antd换肤方案而不是最完美的antd换肤方案，详细的听我娓娓道来。

实现过程

具体的实现过程，我将会从思路，解决方案、细节难点以及项目存在的弊端问题来进行说明。

这里我所有的例子都是通过Next-Antd-Scaffold来进行编写的～

思路

先来说思路，既然我想标新立异，最简单的antd的换肤方案，那肯定不能有复杂的配置过程以及表述不清的文档。当然，说实话