テーマの作成

メモ

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

変数が定義されると、特定の UI サブツリーに対してそれらの変数の値をオーバーライドする代替の「テーマ」を作成できます。

テーマの作成

次のように、任意の変数グループをインポートしてテーマを作成できます。

themes.js

import * as stylex from '@stylexjs/stylex';
import {colors, spacing} from './tokens.stylex';

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

// Dracula theme
export const dracula = stylex.createTheme(colors, {
  primaryText: {default: 'purple', [DARK]: 'lightpurple'},
  secondaryText: {default: 'pink', [DARK]: 'hotpink'},
  accent: 'red',
  background: {default: '#555', [DARK]: 'black'},
  lineColor: 'red',
});

テーマの適用

「テーマ」は、stylex.create() で作成したものと同様のスタイルオブジェクトです。それらは stylex.props() を使用して要素に適用し、その要素とそのすべての子孫の変数をオーバーライドできます。

components/MyComponent.js

import * as stylex from '@stylexjs/stylex';
import {colors, spacing} from '../tokens.styles';
import {dracula} from '../themes';

const styles = stylex.create({
  container: {
    color: colors.primaryText,
    backgroundColor: colors.background,
    padding: spacing.medium,
  },
});

<div {...stylex.props(dracula, styles.container)}>{children}</div>;

注意: 変数グループ内のすべての変数は、テーマを作成するときにオーバーライドする必要があります。この選択は、偶発的な省略を防ぐのに役立ちます。まれに面倒なことを犠牲にしても。

変数の定義と使用方法とは異なり、テーマはコードベースの任意の場所で stylex.createTheme() で作成し、ファイルやコンポーネント間で渡すことができます。

情報

同じ変数グループに対して複数のテーマが同じ HTML 要素に適用されている場合、最後に適用されたテーマが優先されます。