How to use CSS-in-JS libraries
可以使用任何现有的CSS-in-JS解决方案。最简单的是内联样式:
function HiThere() {
return <p style={{ color: 'red' }}>hi there</p>
}
export default HiThere
我们捆绑了styled-jsx来支持隔离的作用域CSS。 目标是支持类似于Web Components的"shadow 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,CSS仍将在生产构建中加载(next start
)。在开发过程中,我们需要启用JavaScript以提供最佳的开发体验和Fast Refresh。