react怎么把公共的方法封装到全局可获取的对象里面_Nextjs使用解读二（布局与数据获取）...

上一篇文章中我们介绍了Nextjs的基本搭建和路由系统，这一篇文章我们来看看Nextjs的布局和它特别的数据获取规范getInitialProps（）,顺带把上一篇中遗留的_app和_document也一并说了。

一、css样式布局

结合官方推荐的方式我总结了下，这三种方式应该是我们平时常用的：

1. styled-jsx

Nextjs官网明说了是内置支持styled-jsx来进行布局的，styled-jsx不了解的同学看下面这个例子就能知道怎么使用了,承接上一篇文章的index.js进行修改：

import React from 'react'
import Router from 'next/router'

export default () => {
    return(
        <>
            <button onClick={()=>Router.push('/demo')} >送我去demo页</button>
            <div id={'o'}>这里是主页</div>
            <style jsx>{`
                #o{
                    background-color:red;
                }
            `}</style>
            <style global jsx>{`
                body {
                    background: black;
                }
                #o{
                    background-color:yellow;
                }
            `}</style>
        </>
    )
}

运行结果

局部样式覆盖了全局样式，呈现红色

很简单的，就是用<style>将css样式包裹起来写成组件加入就可以了，加上global的话就是全局样式，对全局生效（但会随着对应组件的卸载而失效）

这是官方推荐的方式，但我个人不喜欢将样式与逻辑组件挤在一块，所以除非组件很简单，不然我都会采用styled-components

2. styled-components

这个熟悉react开发的同学应该大部分都用过吧，npm的