CSS in JS\styled-jsx

Next.js 14 Styling, CSS Style, CSS-in-JS

引言

依據 Next 14 官網，在 Styling 的部份提供了大類方法。

• CSS modules 預設就有開啟。已熟悉就不再討論。

• Tailwind CSS 需額外安裝套件。不在此文章討論。

• CSS in JS \ styled-jsx CSS in JS 的實作方案也有好幾種，我們只討論預設就有的styled-jsx。 ※ 只在 Client Component 才有效。

• Sass 需額外安裝套件。不在此文章討論。

傳統方法當然也有支援

• global CSS 已熟悉就不再討論。

• inline Style 已熟悉就不再討論。

這篇文章只討論 CSS in JS\styled-jsx。

關鍵知識

CSS-in-JS 只在 Client Component 且支援 JS 情況下有效。最大優勢有 CSS islolation 且全動態。

styled-jsx 可動態產生 CSS class 並繫結該元件範圍內的 element。

以程式碼說明 styled-jsx 語法

StyledJsxDemo.tsx

"use client"
import { useReducer } from "react"

//※ styled-jsx 只在前端元件有效
export default function StyledJsxDemo(props: Readonly<{
  label: string
}>) {
  const [red, incRed] = useReducer((n) => n >= 15 ? 0 : n + 1, 8) // 0~15
  const [blue, incBlue] = useReducer((n) => n >= 15 ? 0 : n + 1, 8) // 0~15
  const [green, incGreen] = useReducer((n) => n >= 15 ? 0 : n + 1, 8) // 0~15

  const bgcolor = `#${hex(red)}${hex(green)}${hex(blue)}`
  return (
    <>
      {/* styled-jsx 可動態產生 CSS class 並繫結該元件範圍內的 element。 */}
      <style jsx>{`
        div {
          padding: 3rem;
          margin: 1rem;
          background-color: ${bgcolor};
        }
      `}</style>

      <div>
        <p>{props.label} → {bgcolor}</p>
        <button style={{ background: 'red' }} onClick={incRed}>紅</button>
        <button style={{ background: 'green' }} onClick={incGreen}>綠</button>
        <button style={{ background: 'blue' }} onClick={incBlue}>藍</button>
      </div>
    </>
  )
}

function hex(num: number): string {
  return "0123456789ABCDEF".at(num) ?? '8'
}

應用

<StyledJsxDemo label="簡易調色盤" />

沒圖沒真象

參考

Getting Started: CSSnextjs.org

4 ways to add styles to Next.js Apps

(EOF)