跳到主要內容

StyleX 簡介

StyleX 是一種簡單、易於使用的 JavaScript 語法和編譯器，可用於設定網頁應用程式樣式。

StyleX 結合了內嵌樣式和靜態 CSS 的優點，並避免兩者的缺點。定義和使用樣式只須元件內的局部知識，且能避免特殊性問題，同時保留媒體查詢等功能。StyleX 使用防衝突的原子 CSS 建立最佳化樣式，優於手動編寫和維護的樣式。

特性一覽​

可擴充​

  • 使用原子 CSS 將 CSS 輸出品最小化。
  • 即使元件數量增長，CSS 大小也能維持在低點。
  • 樣式在不斷增長的程式碼庫中仍然清晰可讀、易於維護。

可預測​

  • 元素上的類別名稱只能直接設定該元素的樣式。
  • 沒有特殊性問題。
  • 「最後套用的樣式一定獲勝！」

可組成​

  • 有條件地套用樣式。
  • 跨元件和檔案邊界合併和組成自訂樣式。
  • 使用局部常數和表示式讓樣式保持簡潔。或者重複樣式而不必擔心效能。

快速​

  • 沒有執行時期樣式注入。
  • 所有樣式都在編譯時打包於靜態 CSS 檔案中。
  • 最佳化的執行時期用於合併類別名稱。

類型安全​

  • 類型安全的 API。
  • 類型安全的樣式。
  • 類型安全的佈景主題。

使用 StyleX​

設定編譯器​

import plugin from '@stylexjs/rollup-plugin';

const config = () => ({
  plugins: [
    plugin({ ...options })
  ]
})

export default config;

定義樣式​

樣式使用物件語法和 create() API 定義。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
});

使用其他金鑰和進一步呼叫 create() 可以建立任意數量的規則。

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
  child: {
    backgroundColor: 'black',
    marginBlock: '1rem',
  },
});

const colorStyles = stylex.create({
  red: {
    backgroundColor: 'red',
    borderColor: 'darkred',
  },
  green: {
    backgroundColor: 'lightgreen',
    borderColor: 'darkgreen',
  },
});

function ReactDiv({ color, isActive, style }) { /* ... */ }

使用樣式​

若要使用樣式，必須傳遞給 props() 函數。可以使用標準 JavaScript 表達式，來組合樣式，以及有條件地套用。

import * as React from 'react';
import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({ ... });
const colorStyles = stylex.create({ ... });

function ReactDiv({ color, isActive, style }) {
  return <div {...stylex.props(
    styles.main,
    // apply styles conditionally
    isActive && styles.active,
    // choose a style variant based on a prop
    colorStyles[color],
    // styles passed as props
    style,
  )} />;
}

上面的範例使用 JSX。StyleX 本身屬於架構中立。相同的程式碼可用於接受 className 字串，以及 style 物件的其它架構上，例如 SolidJS、Preact 或 Qwik。

理想的使用案例​

StyleX 可良好運用於各種專案中。然而，它被設計出來，是為了應付特定使用案例中的挑戰。

JavaScript 中的 UI 編寫​

StyleX 是一個 CSS-in-JS 函式庫，表示它在應用程式的 UI 是以 JavaScript 編寫時，最為好用。如果一個應用程式使用 React、Preact、Solid、lit-html 或 Angular 等架構，那麼使用 StyleX 應該是相當合適的。

有些架構（例如 Svelte 及 Vue）使用自訂的檔案格式，這些檔案會在編譯時編譯成 JavaScript。StyleX 仍然可以在這些架構中使用，但可能需要一些自訂的設定。

大型或仍在成長中的專案​

雖然 StyleX 可順利運作於各種規模的專案上，它在大型應用程式中更能大放光彩。

由於 StyleX 編譯成原子的類別名稱，因此當專案擴大時，CSS 繫結的規模會達到停滯狀態，這是其最大的效能優勢。

可重複使用的元件​

當 StyleX 與可重複使用的 UI 元件並用時，好處最為顯著。

多年來，我們必須在以下兩者中做出選擇：具備內建樣式但難以自訂的「設計系統」元件，或者完全沒有樣式的「無頭」元件。

StyleX 賦予開發人員建立 UI 元件的能力，這些元件既能擁有預設樣式，又能自訂。

此外，此一致性讓這些元件能透過發佈到 NPM 來分享。消費者使用元件時，只要他們也使用 StyleX，那麼這些樣式便會合併，並正確地組合起來，無須任何額外的設定。