Theme<>

type Theme<T extends VarGroup<unknown, symbol>>

Themeは、指定されたVarGroup内の変数の集合をテーマとするスタイルを表す型です。stylex.createThemeを呼び出した結果です。

import type {VarGroup} from '@stylexjs/stylex';
import * as stylex from '@stylexjs/stylex';

import {vars} from './vars.stylex';

export const theme: Theme<typeof vars> = stylex.createTheme(vars, {
  color: 'red', // OK
  backgroundColor: 'blue', // OK
});

Themeの最も一般的なユースケースは、特定の変数のセットのテーマを受け入れることです。

ほとんどの場合必要ありませんが、Themeはオプションの2番目の型の引数も受け入れます。

高度なユースケース：`Theme`の独自の型ID

同じVarGroupの2つのテーマは、デフォルトで同じ型になります。ほとんどの場合、これは望ましい動作です。しかし、場合によっては、特定のコンポーネントに渡すことができるテーマを制約するために、各テーマが独自の型IDを持つようにしたい場合があります。

import * as stylex from '@stylexjs/stylex';
import type {Theme} from '@stylexjs/stylex';
import {vars} from './vars.stylex';

declare const Tag: unique symbol;
export const theme1: Theme<typeof vars, Tag> = stylex.createTheme(vars, {
  color: 'red', // OK
  backgroundColor: 'blue', // OK
});

これで、theme1には独自の型IDがあり、varsの別のThemeはtypeof theme1を満たさなくなります。

この高度なユースケースはあまり必要ありませんが、必要な場合は使用できます。