CSS-in-JS ライブラリの使い方

例

既存のCSS-in-JSソリューションはすべて使用可能です。最も簡単なのはインラインスタイルです。

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}
 
export default HiThere

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

他の一般的なCSS-in-JSソリューション（Styled Componentsなど）については、上記の例を参照してください。

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

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</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を有効にすることを推奨します。

役に立ちましたか？