CSS样式

内置styled-jsx

在Next.js中内置了styled-jsx,它是一个CSS-in-JS库,允许在React组件中编写CSS,CSS仅作用于组件内部

Next应用中添加样式的方式 - 图1

Next应用中添加样式的方式 - 图2

CSS模块

通过使用CSS模块功能,允许将组件的CSS样式编写在单独的CSS文件中

CSS模块约定样式文件的名称必须为”组件文件名称.module.css”

Next应用中添加样式的方式 - 图3

Next应用中添加样式的方式 - 图4

Next应用中添加样式的方式 - 图5

全局样式文件

1.在pages文件夹中新建_app.js文件并加入如下代码

2.在项目根目录下创建styles文件夹,并在其中创建global.css

3.在_appjs中通过import引入global.css

4.重新启动开发服务器

npm run dev

Next应用中添加样式的方式 - 图6

Next应用中添加样式的方式 - 图7

Next应用中添加样式的方式 - 图8