📌  相关文章
📜  Next.js-CSS支持

📅  最后修改于: 2020-10-22 06:45:01             🧑  作者: Mango

在Next.js中，我们可以使用名为styled-jsx的inbuild 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;  
}

在Components目录中创建container.js文件

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

function Container({ children }) {
   return 
{children}

}

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 (
      <>
         
            
               My First Post
            
            
My First Post

            

            
               Home
            
            

         
      >      
   )
}

启动Next.js服务器

运行以下命令以启动服务器-。

npm run dev
> nextjs@1.0.0 dev \Node\nextjs
> 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并转到第一篇文章，您将看到以下输出。

样式第一页