如何使用 CSS-in-JS 函式庫

範例

可以使用任何現有的 CSS-in-JS 解決方案。最簡單的是內聯樣式：

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

export default HiThere

我們捆綁了 styled-jsx 以提供對隔離範圍 CSS 的支援。目的是支援類似於 Web 元件的「影子 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)。

停用 JavaScript

On this page