Nextjs 13 使用不同样式文件

发布于2022-11-14， 文章约61字， 阅读约需1分钟。

---

在Nextjs 13里，对不同的样式文件有不同的规定：

1、全局定义样式文件，需要在globals.css里写入，比如引入tailwindcss，全局定义背景什么的；

2、其他独立样式定义可以新建样式文件，然后在需要的页面里导入该样式文件，然后使用{ styles.some-style-prop }的方式来使用；举例说明如下：

比如说我的Home页面，需要将一处文字加大，我可以在globals.css里定义，但为了独立，我新建了一个Home.module.css文件，里面写入了以下内容：

/* Home.module.css */

.content{
    color: grey;
    font-size: 25px;
}

然后我在Home的页面里，先导入该样式文件：

import Home from "../sytles/Home.module.css";

然后在元素上这样作用：

<p className={ Home.content }>some bla bla bal bla bla </p>

当然，如果这个节点全局定义的一些样式，比如说已经有tailwind样式了，还需要一些特殊的样式，我们可以这样来使用：

<p className={ Home.content + '  px-6 mx-6 '} >some bla bla bal bla bla </p>

需要注意的是在{ Home.content + ' px-6 mx-6 '} 里面，' px-6 mx-6 ' px-6前面需要添加空格，不然的话前面的样式定义就和px-6连在一起了，然后样式就不起作用了。

结束！