我在使用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来解决。

总结

最后网页的效果和开发环境还是存在不一致的情况，让我有点纠结是不是应该换种解决方案，umi+antd的方式可能更加合适一点。

其实自己配也行，就是SSR方面有点难解决。

最后Next官方其实带了JSS的解决方案，我个人第一次写稍微复杂的项目，感觉自己的CSS代码组织的很差，还有好多可以优化的地方，而JSS相对来说成本是要低一点的。

目前业界实现的主要有两种，一种是styled-jsx：

export default () => (<div><p>only this paragraph will get the style :)</p>{ /* you can include <Component />s here that includeother <p>s that don't get unexpected styles! */ }<style jsx>{`p {color: red;}`}</style></div>
)

一种是styled-components:

const Title = styled.h1`font-size: 1.5em;text-align: center;color: palevioletred;
`;

后者反响更好一点，当然前者是zeit的东西，可能对 next.js 的支持更好点，我想的是下一个项目试用一下JSS组织代码。

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

js new Date()不带时分秒时，时间变了问题解决
js new Date()不带时分秒时,时间变了问题解决参考文章: (1)js new Date()不带时分秒时,时间变了问题解决 (2)https://www.cnblogs.com/q149 ...
Node.js~ioredis处理耗时请求时连接数瀑增
关于redis连接数过高的解释对于node.js开发环境里,使用传统的redis或者使用ioredis都是不错的选择,而在处理大数据请求程中,偶尔出现了连接池( redis服务端的最大可用连接数,默 ...
获取js里添加的css文件,用JS添加一个css文件
我在这里发现了一些关于我的问题的问题,但我无法使用它. 通过JS点击它们时我会改变的CSS属性,JQuery的用JS添加一个css文件 Green Red /*$(document).ready(fu ...
[css] 除了可以用js跟踪用户信息外，如果不用js，使用纯css怎么做呢？
[css] 除了可以用js跟踪用户信息外,如果不用js,使用纯css怎么做呢? 可以利用 css 的伪类 :hover :active :focus 之类的监听用户行为,然后给指定的url 发送请求. ...
js获取html样式属性,js怎么获取指定css属性的值？
js怎么获取指定css属性的值?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. js怎么获取指定css属性的值? 1.通过dom.style.属性来获取 ...
Auto.js 控件属性缺失时获取控件
Auto.js 在控件属性缺失情况下获取控件群里有很多新人问,各种既没有id也没有text的控件无法获取的问题. 文章目录 Auto.js 在控件属性缺失情况下获取控件使用环境一.具体操作只用 ...
用js实现的对css的一些操作方法
用js实现的对css的一些操作方法,集合,方便需要用js控制css的朋友 //获取元素的真实的,最终的CSS样式属性值的函数 function getStyle(elem,name){ if(elem ...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...
用JS来动态设置CSS样式
常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 ...
JS修改标签的css样式
JS修改标签的css样式例:<span id='name'></span> js中修改id为name的span的样式 var name= document.getElemen ...

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

前言

开发

生产

总结

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

最新文章

热门文章