跳至內容
建置您的應用程式樣式CSS-in-JS

(保留原始 HTML 結構，僅翻譯文字內容：建置您的應用程式 -> 建置您的應用程式, 樣式 -> 樣式)

CSS-in-JS

範例

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

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

我們綑綁了 styled-jsx 來提供隔離作用域 CSS 的支援。目標是支援類似網頁元件的「shadow CSS」，可惜的是它 不支援伺服器端渲染，並且僅限於 JavaScript。

請參閱上述其他熱門 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，才能透過 快速重新整理 提供最佳的開發體驗。