Next.js 全局样式与局部样式

Next.js About 703 words

全局样式

app/global.css

新建一个.css结尾的文件即可（不一定是global名字也可以）。

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

app/layout.tsx

直接导入global.css整个文件即可使用

import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <div className="blog">
            {children}
        </div>
      </body>
    </html>
  )
}

局部样式

app/blog/blog.module.css

使用xxx.module.css代码CSS Module。

.blog {
  padding: 24px;
}

app/blog/page.tsx

xxx.module.css默认导出了styles对象，使用styles.blog应用对应的属性。

import styles from './blog.module.css'
 
export default function Page() {
  return <main className={styles.blog}></main>
}

Views: 2 · Posted: 2025-10-21

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓