Hello World 项目小试牛刀之后，尝试给页面添加样式。

于是我们信心满满地按照 react 的方式，先写一个内联样式。修改 index.js 如下：

1
2
3
4
5
6
7
8
9
10
import React from 'react';

const fontStyle = {
    backgroundColor: 'yellow',
    color: 'red'
};

export default () => (
    <h1 style={fontStyle}>Hello World!</h1>
);

nice，成功了，但作为一个有追求的前端开发，你不满于内联样式，于是你又新建了一个 index.css，然后按照 react 的方式引入.

1
2
3
4
5
// index.css
h1 {
    background-color: yellow;
    color: red;
}
1
2
3
4
5
6
7
8
// index.js
import React from 'react';

import './index.css';

export default () => (
    <h1>Hello World!</h1>
);

发现出现了模块解析失败的错误，NextJs 无法解析 css 的格式。但他内置了另一种 css 的写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// index.js
import React from 'react';

export default () => (
    <div>
        <h1>Hello World!</h1>
        <style jsx>{`
            h1 {
                background-color: black;
                color: red;
            }
        `}</style>
        <style global jsx>{`
            body {
                background-color: pink;
            }
            * {
                margin: 0;
                padding: 0;
                color: pink;
            }
        `}</style>
    </div>
);

这种写法中 style jsx 样式具有作用域的概念，也就是只会作用当前 js 渲染的 dom 元素，如果想要全局生效的样式，可以使用
style global jsx 标签。

当然，你可能比较执拗，就是要引入 css 样式文件，当然也是可以实现的。

因为 nextjs 服务端渲染出的都是单文件(也可以包含静态路由)，可以利用其提供的 Head 去给页面添加头部信息，然后引入对应的 css 静态文件。注意 nextjs 默认静态文件必须放在根目录下的 static 文件夹下。

1
2
3
4
// static/index.css
body { background-color: pink; }
* { margin: 0; padding: 0; color: pink; }
h1 { background-color: yellow; color: red; }
1
2
3
4
5
6
7
8
9
10
11
12
13
// page/index.js
import React from 'react';
import Head from 'next/head';

export default () => (
    <div>
        <Head>
            <title>Hello ~</title>
            <link href="/static/index.css" rel="stylesheet" />
        </Head>
        <h1>Hello World!</h1>
    </div>
);

如愿以偿。