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-jaxドキュメントを参照してください。
JavaScriptの無効化
はい、JavaScriptを無効にしても、本番ビルド(next start
)ではCSSは引き続きロードされます。開発中は、Fast Refreshで最高の開発者体験を提供するため、JavaScriptを有効にする必要があります。