CSS-in-JS

示例

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

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

我们捆绑了 styled-jsx 以提供对隔离作用域 CSS 的支持。目的是支持类似于 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，CSS 仍将在生产构建 (next start) 中加载。在开发过程中，我们需要启用 JavaScript 以提供快速刷新带来的最佳开发者体验。

这有帮助吗？