P07：Next.js教程

1. 初识Style JSX语法 把字体设成蓝色
2. 自动加随机类名 不会污染全局 CSS
3. 动态显示样式
4. 总结

在Next.js中引入一个 CSS 样式是不可以用的，如果想用，需要作额外的配置。因为框架为我们提供了一个style jsx特性，也就是把 CSS 用 JSX 的语法写出来。如果你以前学过 Vue，那这种写法你是非常熟悉的。

初识Style JSX语法 把字体设成蓝色

在pages文件夹下，新建一个jspang.js文件。然后写入下面的代码：

function Stylejsx(){
    return (
        <>
            <div>-前端博客|前端教程</div>
        </>
    )
}

export default Stylejsx

这个是一个最简单的页面，只在层中写了一句话。这时候我们想把页面中字的颜色变成蓝色，就可以使用Style JSX语法。直接在<></>之间写下如下的代码:

<style jsx>
   {
      `div{color:blue;}`
   }
</style>

主要所有的 css 样式需要用{}进行包裹，否则就会报错。这时候你打开浏览器进行预览，字体的颜色就变成了蓝色。

总结

本文主要学习了Style jsx的一些知识，有了这些知识，可以让我们的页面变得更加美观。