Next项目中添加CSS样式

原创已于 2023-01-03 16:21:47 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

于 2023-01-03 14:10:28 首次发布

本文介绍了在Next.js框架中添加CSS样式的三种方式：1)使用tailwindcss，提供简洁的类名但限制了对组件库样式的修改；2)创建.module.css文件，支持模块化样式；3)直接在JS文件中写内联样式，但会使文件显得混乱。

前言

刚接触Next，发现写单独的.css文件引入页面不生效，也不能像vue文件一样写style，网上关于Next的介绍又比较少，最后只能从Next官网找突破口。下面就介绍下在Next中添加CSS样式的几种方法。

一、使用`tailwindcss`

推荐使用
优点：代码看上去很简洁，可以完成绝大部分样式需求
缺点：不能进行样式穿透修改组件库的样式
tailwindcss官网

`home.js`

function Home() {
  return (
    <>
      <h1 className="text-center bg-red-600">我是home页面</h1>
    </>
  );
}
export default Home;

二、创建 `文件名.module.css`文件

文件名必须是 `什么.module.css`

`home.module.css`

.title {
  color: red;
  text-align: center;
}

`home.js`

import style from "./home.module.css";
function Home() {
  return (
    <>
      <h1 className={style.title}>我是home页面</h1>
    </>
  );
}
export default Home;

三、直接写在`JS`文件中

`home.js`

不推荐使用，会显得文件很杂乱

function Home() {
  return (
    <>
      <h1 className="title">我是home页面</h1>
      <style>
        {`
         .title {
            color: red;
            text-align: center;
          }
        `}
      </style>
    </>
  );
}
export default Home;