next中的样式写法

前言

next是react的SSR的一种实践方案，今天记录一下next的样式写法。

样式实现大致有以下几种

• 内联样式
• css/less常规引入
• 模块化引入
• css in js

内联样式

内联样式实现其实没啥好说的，算是css一种补充吧，和常规html的style相差不远

	...
	<div	style={{ fontSize: 20 }}>
		样式实现
	</div>
	...

常规引入

常规引入写法也很常见，包括less的也可以这么引入。但是它有个问题就是，全局都会受到该样式的影响，所以我们就想将它模块化，实现vue中style标签的scope私有效果
style.css

	.text{
		font-size: 20px;
	}

	import "./style.css"
	...
	<div className="text">
		样式实现
	</div>
	...

模块引入

先说说next中css的模块化引入，该功能是next内嵌的功能，这里css命名需要加个module。
style.module.css

	.text{
		font-size: 20px;
	}

	import  style from "./style.module.css"
	...
	<div className={ style.text }>
		样式实现
	</div>
	...

next中less模块化写法和css的写法大致一样，只是需要额外配置less.
首先要在工程一级目录下创建一个next.config.js文件，然后对less模块化进行一下简单配置。需要先安装less

npm  install @zeit/next-less less 

next.config.js

	const withLess = require('@zeit/next-less');
	
	module.exports = withLess({
	  // 开启less模块化
	  cssModules: true,
	});

less 的文件名不需要加module，因为css是内置的，所以需要加
style.less

	.text{
		font-size: 20px;
	}

	import  style from "./style.less"
	...
	<div className={ style.text }>
		样式实现
	</div>
	...

css in js

这种方案就有点像vue的style，可以模块化，也可以全局(style上加个global 就全局了)，css和js可以都写在一个组件里，next内嵌了该方法，用起来非常舒服

    <div>
      <div className="text">404</div>
      <style jsx>
        {`
          .text{
            font-size: 20px;
          }
        `}
        {/* 全局加个 global */}
         <style global  jsx>
        {`
          .text{
            font-weight: 400;
          }
        `}
      </style>
    </div>

总结

其实我们大家用的比较多的大概是后面两种，毕竟模块化还是更有利协同开发的。至于是用less的模块化还是css in js就看大家自己项目组的投票了。