如何在 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
庫取而代之。