如何在 Next.js 中對 React 組件進行樣式化?

我們有很多自由度,因為可以使用任何我們喜歡的庫。

但是 Next.js 內建了 styled-jsx,這是由 Next.js 的開發團隊開發的庫。

這是一個非常酷的庫,提供了範圍限定的 CSS,這對於可維護性非常有幫助,因為 CSS 只會影響應用到的組件。

我認為這是一種很好的撰寫 CSS 的方式,而不需要應用其他增加複雜度的庫或預處理器。

在 Next.js 中為 React 組件添加 CSS,我們將它插入到 JSX 中一個片段中,該片段以以下開始:

<style jsx>{`

並以以下結束:

`}</style>

在這個奇怪的區塊中,我們可以像在 .css 文件中一樣編寫普通的 CSS:

<style jsx>{`
 h1 {
 font-size: 3rem;
 }
`}</style>

你可以像這樣在 JSX 內寫入它:

const Index = () => (
 <div>
 <h1>首頁</h1>

 <style jsx>{`
 h1 {
 font-size: 3rem;
 }
 `}
 </style>
 </div>
)

export default Index

在這個區塊內,我們可以使用插值來動態改變值。例如,這裡假設父組件傳遞了一個 size 屬性,我們在 styled-jsx 區塊中使用它:

const Index = props => (
 <div>
 <h1>首頁</h1>

 <style jsx>{`
 h1 {
 font-size: ${props.size}rem;
 }
 `}</style>
 </div>
)

如果你想要將一些 CSS 全局應用,而不僅僅是對某個組件的範圍內,你可以在 style 標籤中添加 global 關鍵字:

<style jsx global>{`
body {
 margin: 0;
}
`}</style>

如果你想在 Next.js 組件中引入外部 CSS 文件,你需要先安裝 @zeit/next-css 庫:

npm install @zeit/next-css

然後在項目的根目錄下創建一個名為 next.config.js 的配置文件,內容如下:

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

重新啟動 Next.js 應用後,你現在可以像預設引入 JavaScript 庫或組件一樣引入 CSS 了:

import '../style.css'

你還可以直接引入 SASS 文件,使用 @zeit/next-sass 庫取而代之。