メインコンテンツにスキップ

変数の定義

注意

テーマAPIを有効にするには、StyleX Babel構成でunstable_moduleResolutionオプションを有効にする必要があります。

StyleXには、アトミックスタイルを生成するコンポーネントのスタイルを作成するだけでなく、信頼性が高く、予測可能でタイプセーフな方法でCSSカスタムプロパティ（CSS変数）を定義するためのAPIもあります。

デザインのインスピレーション​

StyleXのテーマAPIの設計は、ReactのContext APIに直接触発されています。変数は、Reactコンテキストが作成される方法と同様に、デフォルト値を使用して定義され、テーマを作成して、UIサブツリーのこれらの変数に異なる値を「提供」できます。

変数の定義​

変数のグループは、stylex.defineVars関数を使用して定義されます。

tokens.stylex.js
import * as stylex from '@stylexjs/stylex';

export const tokens = stylex.defineVars({
  primaryText: 'black',
  secondaryText: '#333',
  accent: 'blue',
  background: 'white',
  lineColor: 'gray',
  borderRadius: '4px',
  fontFamily: 'system-ui, sans-serif',
  fontSize: '16px',
});

この関数もコンパイル時に処理され、CSS変数名が自動的に生成されます。

これにより、HTMLドキュメントの:rootで変数が定義されます。それらは定数としてインポートされ、stylex.create呼び出し内で使用できます。

メディアクエリの使用​

変数の値は、メディアクエリに基づいて変化する可能性があります。

tokens.stylex.js
import * as stylex from '@stylexjs/stylex';

// A constant can be used to avoid repeating the media query
const DARK = '@media (prefers-color-scheme: dark)';

export const colors = stylex.defineVars({
  primaryText: {default: 'black', [DARK]: 'white'},
  secondaryText: {default: '#333', [DARK]: '#ccc'},
  accent: {default: 'blue', [DARK]: 'lightblue'},
  background: {default: 'white', [DARK]: 'black'},
  lineColor: {default: 'gray', [DARK]: 'lightgray'},
});

同様に、@supportsも使用できます。

変数を定義する際のルール​

変数は、stylex.create呼び出し内で使用できる唯一の非ローカル値の型です。これは、いくつかのルールを強制することにより可能になります。

1. 変数は.stylex.jsファイルで定義する必要があります​

変数は、次のいずれかの拡張子を持つファイルにある必要があります。

  1. .stylex.js
  2. .stylex.mjs
  3. .stylex.cjs
  4. .stylex.ts
  5. .stylex.tsx
  6. .stylex.jsx

2. 変数は名前付きエクスポートである必要があります​

すべてのstylex.defineVars呼び出しは、名前付きエクスポートである必要があります。

許可:​
// ✅ - Named export
export const colors = stylex.defineVars({
  /* ... */
});

const sizeVars = { ... };
// ✅ - Another Named export
export const sizes = stylex.defineVars(sizeVars);
許可しない:​
// ❌ - Only named exports are allowed
export default stylex.defineVars({
  /* ... */
});

// ❌ - The variable must be exported directly
const x = stylex.defineVars({
  /* ... */
});
export const colors = x;

// ❌ - The variables cannot be nested within another object
export const colors = {
  foregrounds: stylex.defineVars({
    /* ... */
  }),
  backgrounds: stylex.defineVars({
    /* ... */
  }),
};

3. ファイル内で他のエクスポートは許可されていません​

今のところ、.stylex.jsファイルはCSS変数を定義するためだけに使用されます。