使用CSS樣式化Next.js組件

如何在Next.js中設置React組件的樣式?

我們如何在Next.js中設置React組件的樣式?

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

但是Next.js附帶了styled-jsx內置的,因為這是由從事Next.js的同一個人構建的庫。

它是一個非常酷的庫,為我們提供了範圍內的CSS,這對於可維護性非常有用,因為CSS僅會影響所應用的組件。

我認為這是編寫CSS的好方法,而無需應用其他會增加複雜性的庫或預處理器。

要將CSS添加到Next.js中的React組件中,我們將其插入JSX的一個片段中,該片段以

<style jsx>{`

並以

`}</style>

在這個怪異的代碼塊中,我們編寫了普通的CSS,就像我們在.css文件:

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

您可以在JSX內編寫它,如下所示:

const Index = () => (
  <div>
		<h1>Home page</h1>
	<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span> <span style="color:#a6e22e">jsx</span><span style="color:#f92672">&gt;</span>{<span style="color:#e6db74">`

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

export default Index

在塊內部,我們可以使用插值來動態更改值。例如,在這裡我們假設sizeprop由父組件傳遞,我們在styled-jsx堵塞:

const Index = props => (
  <div>
		<h1>Home page</h1>
	<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span> <span style="color:#a6e22e">jsx</span><span style="color:#f92672">&gt;</span>{<span style="color:#e6db74">`

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

如果您想在全局範圍內應用某些CSS,而不是將其應用於某個組件,則可以添加global關鍵字style標籤:

<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應用程序後,您現在可以像通常使用JavaScript庫或組件一樣導入CSS:

import '../style.css'

您也可以使用@zeit/next-sass庫。

免費下載我的Next.js手冊


接下來的更多教程: