我在使用Next.js, Antd, @zeit/next-css时遇到的一些问题

前言

这是我自己在给基于Next.js的React项目添加样式时遇到的一些问题和想到的解决方案，因为Next.js是对React比较高级的封装，他有着自成体系的解决方案，因此我们在使用antd时很可能会遇到一些莫名其妙的问题网上有一些解决这些问题的轮子，但是不得不说配置起来也是相当费时间的，因此总结一下的话我觉得前台页面最好少用这种样式库，或者使用material design可能坑会少一点。或者使用 umi，与Antd的继承肯定更好些。

开发

开发阶段的一个显著的问题就是除了首屏渲染的组件之外，其他页面第一次加载的时候是没有样式的。这个问题在生产环境中是不存在的，说白了就是next.js中没有使用 params得到动态路由的方式，因此我们切换页面是无法准确的加载。

于是我开始检查是不是动态路由传值时哪里写错了，但是并没有找到，所以我觉得大概率应该是query传值的问题，于是我把这些样式放在index.js当中首屏加载，得到了想要的结果。

产生这样的问题还是有点烦人的，个人觉得应该可以通过按需加载的配置等来解决，但是目前能力不够只能放在首屏。

而且这样的问题在生产环境中其实是不会发生的，所以你也可以不换。

生产

但是这并不意味着生产环境的部署会是一帆风顺。

我在生产环境遇到了一些想要的样式被莫名其妙覆盖的问题，我发现主要有两种。

首先是Antd的样式，凡是被我修改过，使用antd命名的样式在生产环境中是不生效的，不知道为什么，难道是CSS权重发生变化了？

然后是与Antd有关的布局，有部分布局不生效，感觉也是Next与Antd的问题。

解决方式有很多，为了代码更加整洁系统，我们可以把所有用Antd的标识的组件用别的方式实现，比如选择器，或者直接命名className之类的，实在不行还有!important来解决。

总结

最后网页的效果和开发环境还是存在不一致的情况，让我有点纠结是不是应该换种解决方案，u