当前位置：首页 > article >正文

Next.js【详解】CSS 样式方案

article 2025/2/19 17:36:53

全局样式 Global CSS

默认已创建，即 src\app\globals.css，可根据需要修改
默认在全局布局中导入
src\app\layout.tsx
```
import "./globals.css";
```

组件样式 CSS Modules

新建文件 src\app\test\styles.module.css
```
.red {
    color: red;
  }
```

导入目标页面使用
src\app\test\page.tsx

import styles from "./styles.module.css";

export default function Page() {
  return <main className={styles.red}>主体内容</main>;
}

最终效果如下：

在这里插入图片描述
字体的实现见 https://blog.csdn.net/weixin_41192489/article/details/145625560

CSS 框架 Tailwind CSS

创建项目时，选择采用 Tailwind CSS 即可自动集成使用

Tailwind CSS 官网为 https://tailwindcss.com/docs/installation/using-vite

Tailwind CSS 实用教程见 https://blog.csdn.net/2401_83384536/article/details/140352836

使用范例

<h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>

CSS 预处理 Sass

安装 sass
```
pnpm i --save-dev sass
```

在目标页面文件同目录下创建 scss 文件，如 src\app\test\test.module.scss

.container {
  background-color: yellow;

  h1 {
    color: red;
  }
}

页面中导入使用
src\app\test\page.tsx

import styles from "./test.module.scss";

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>在 Next.js 中使用 Sass!</h1>
    </div>
  );
}

效果如下

在这里插入图片描述

组件中编写样式 styled-jsx

Next.js 内置支持 styled-jsx , 但仅适用于客户端组件

// 客户端组件
"use client";
export default function Page() {
  return (
    <>
      <div>
        <h1>在 Next.js 中使用 Sass!</h1>
      </div>
      <style jsx>{`
        h1 {
          color: red;
        }
      `}</style>
    </>
  );
}