CSSを使用したNext.jsコンポーネントのスタイリング

Next.jsでReactコンポーネントのスタイルを設定するにはどうすればよいですか?

Next.jsでReactコンポーネントをどのようにスタイル設定しますか?

好きなライブラリを使用できるので、私たちには多くの自由があります。

しかし、Next.jsにはstyled-jsxこれは、Next.jsで作業しているのと同じ人々によって構築されたライブラリだからです。

また、スコープ付きCSSを提供する非常に優れたライブラリであり、CSSは適用されるコンポーネントにのみ影響するため、保守性に優れています。

これは、複雑さを増す追加のライブラリやプリプロセッサを適用する必要なしに、CSSを作成する上で優れたアプローチだと思います。

Next.jsのReactコンポーネントにCSSを追加するには、JSXのスニペット内にCSSを挿入します。

<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'

を使用して、SASSファイルを直接インポートすることもできます。@zeit/next-sass代わりにライブラリ。

私の無料ダウンロードNext.jsハンドブック


その他の次のチュートリアル: