Menu

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