CSS-in-JSライブラリの使用方法

サンプル

既存のCSS-in-JSソリューションをどれでも使用できます。最もシンプルなのはインラインスタイルです:

function HiThere() {
  return <p style={{ color: 'red' }}>こんにちは</p>
}

export default HiThere

私たちはスコープ付きCSSのサポートを提供するためにstyled-jsxをバンドルしています。目的はWebコンポーネントに似た「シャドウCSS」をサポートすることですが、残念ながらサーバーレンダリングはサポートされておらず、JSのみです。

他の人気のあるCSS-in-JSソリューション（Styled Componentsなど）については上記のサンプルを参照してください。

styled-jsxを使用したコンポーネントは次のようになります:

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>スコープ付き!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

より多くの例についてはstyled-jsxドキュメントを参照してください。

JavaScriptの無効化

はい、JavaScriptを無効にしても、本番ビルド(next start)ではCSSが読み込まれます。開発中は、Fast Refreshによる最適な開発者体験を提供するためにJavaScriptを有効にする必要があります。

CSS-in-JSライブラリの使用方法

JavaScriptの無効化

On this page