Next.js - CSS 支持

在 Next.js 中，我们可以使用名为 styled-jsx 的内置 css-in-js 库。它允许在 React 组件中编写 css，并且这些样式将作用域到组件。

在此示例中，我们将创建一个 Container 对象，该对象将用于通过包含其他组件来设置它们的样式。

让我们更新 元数据 一章中使用的 nextjs 项目。

首先在根级别创建一个 Components 目录并添加一个文件 container.module.css，如下所示 −

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

Create container.js file in Components directory

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

现在在 first.js 中使用 Container 组件。

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

启动 Next.js 服务器

运行以下命令启动服务器 −.

npm run dev
> nextjs@1.0.0 dev \Node
extjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

验证输出

在浏览器中打开 localhost:3000 并转到第一篇帖子，您将看到以下输出。