まくろぐ

Next.js でコンポーネント内に直接 CSS を記述する (styled-jsx)

更新:
作成:

Next.js は CSS-in-JS ライブラリの一種である styled-jsx をデフォルトでサポートしています(styled-jsxNext.js と同様に Vercel がメンテナンスしています)。 React コンポーネントの定義の中に、次のように CSS を直接記述することができます。

<style jsx>{`
  ...
`}</style>

下記は実際に styled-jsx を使って p 要素をスタイル設定した例です。

pages/sample.tsx
export default () => <>
  <p>only this paragraph will get the style</p>
  <style jsx>{`
    p {
      color: red;
    }
  `}</style>
</>

ここで設定したスタイルのスコープは、この React コンポーネントに閉じたものになるため、他の React コンポーネントに影響を与えてしまう心配がありません。 そのため、シンプルなタグ名やクラス名でスタイル設定を行うことができます。

Next.js は、外部ファイルとして作成した .cssscss ファイルを読み込む CSS Modules の機能 もデフォルトでサポートしています(その場合は *.module.css というファイル名にするというルールがあります)。

関連記事

まくろぐ
サイトマップまくへのメッセージ