How to use CSS-in-JS libraries

Details

示例

• Styled JSX
• Styled Components
• Emotion
• Linaria
• Styletron
• Cxs
• Fela
• Stitches

你可以使用任何现有的 CSS-in-JS 方案。最简单的方式是内联样式：

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

export default HiThere

我们内置了 styled-jsx，用于支持隔离作用域的 CSS。 其目标是支持类似 Web Components 的“Shadow CSS”，但遗憾的是 Web Components 不支持服务端渲染且只能用 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）中被加载。在开发环境下，为了提供最佳的开发体验（如 Fast Refresh），我们要求启用 JavaScript。