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 并转到第一篇帖子,您将看到以下输出。
