/

使用 CSS 樣式化 Next.js 組件

使用 CSS 樣式化 Next.js 組件

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

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

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

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

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

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

1
<style jsx>{`

並以以下結束：

1
`}</style>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Index = () => (
 <div>
 <h1>首頁</h1>

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

export default Index

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

1
2
3
4
5
6
7
8
9
10
11
const Index = props => (
 <div>
 <h1>首頁</h1>

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

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

1
2
3
4
5
<style jsx global>{`
body {
 margin: 0;
}
`}</style>

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

1
npm install @zeit/next-css

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

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

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

1
import '../style.css'

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