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

スタイルの使用

定義されたスタイルは、stylex.props 関数を使用して HTML 要素に展開できる props に変換できます。stylex.props 関数は、HTML 要素に適切な className prop を設定し、動的スタイルを使用している場合は style prop を設定します。

<div {...stylex.props(styles.base)} />

これは最も単純なケースですが、複数のスタイルオブジェクトを結合したり、条件付きで使用したり、モジュール境界を越えてスタイルを構成したりするのは簡単です。

Solid、Svelte、Qwik、Vueなど: stylex.attrs

className の代わりに class を期待するフレームワークの場合は、代わりにstyle.attrs を使用してください。使い方は stylex.props と同じです。

stylex.attrs は、サーバーサイドレンダリングや style にオブジェクトを受け入れないフレームワークに役立つように、すべての style 値を文字列に変換します。

スタイルのマージ​

stylex.props 関数は、スタイルのリストを受け取り、「最後に適用されたスタイルが常に優先される」という決定論的な方法でマージできます。

いくつかのスタイルオブジェクトが次のように定義されているとします。

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

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'grey',
  },
  highlighted: {
    color: 'rebeccapurple',
  },
});

<div {...stylex.props(styles.base, styles.highlighted)} />;

結果の HTML 要素は紫色のテキストになります。なぜなら、そのスタイルが最後に適用されたからです。代わりに、スタイルの順序が逆になると、テキストは灰色になります。

<div {...stylex.props(styles.highlighted, styles.base)} />

注意: スタイルの定義順序は結果のスタイルには影響せず、HTML 要素への適用順序のみに影響します。

Object.assign のように

stylex.props 関数について考える簡単な方法は、Object.assign が行うことを行うということです。これは、多くのオブジェクトをマージし、後のオブジェクトが前のオブジェクトよりも優先されます。

実際の実装はパフォーマンスのために最適化されています。

条件付きスタイル​

スタイルは、三項演算子や && 演算子などの一般的な JavaScript パターンを使用して、実行時に条件付きで適用できます。stylex.props は、null、undefined、false などの偽の値は無視します。

<div
  {...stylex.props(
    styles.base,
    props.isHighlighted && styles.highlighted,
    isActive ? styles.active : styles.inactive,
  )}
/>

スタイルバリアント​

「バリアント」と呼ばれる一般的なスタイリングパターンを使用すると、variant という名前の prop の値に基づいて、可能なスタイルのリストのいずれか1つを適用できます。StyleX は、追加の API なしでこのパターンをサポートします。代わりに、オブジェクトプロパティルックアップを使用して同じ結果を達成できます。

まず、各バリアントは、スタイルオブジェクトの適切なバリアント名で定義できます。

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

const styles = stylex.create({
  violet: {
    backgroundColor: {
      default: 'blueviolet',
      ':hover': 'darkviolet',
    },
    color: 'white',
  },
  gray: {
    backgroundColor: {
      default: 'gainsboro',
      ':hover': 'lightgray',
    },
  },
  // ... more variants here ...
});

次に、styles オブジェクトのキーとしてバリアント prop を使用して、適切なスタイルを適用できます。

function Button({variant, ...props}) {
  return <button {...props} {...stylex.props(styles[variant])} />;
}

propsとしてのスタイル​

StyleX はスタイルの共同配置を推奨していますが、ファイルおよびコンポーネント境界を越えてスタイルを渡して使用することは可能です。コンポーネントにオーバーライドスタイルを props として渡すのが慣例です。

スタイル props をコンポーネントに渡す​

<CustomComponent style={styles.base} />
危険

stylex.props 関数は className と style を持つオブジェクトを返します。スタイルがコンポーネント内でマージされる場合は使用しないでください。

// NO!
<CustomComponent style={stylex.props(styles.base)} />

条件付きスタイルを含む複数のスタイルオブジェクトは、配列リテラルを使用して渡すことができます。

<CustomComponent style={[styles.base, isHighlighted && styles.highlighted]} />
Prop名は任意です

style は任意の prop 名です。コードベースに合わせて独自の prop 名を選択できます。

コンポーネントでスタイルを受け入れる​

カスタム StyleXStyles を受け入れるのは、他の prop を受け入れるのと同じくらい簡単です。そして、stylex.props 関数で適用します。ローカルスタイルと同じように。

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

// Local Styles
const styles = stylex.create({
  base: {
    /*...*/
  },
});

function CustomComponent({style}) {
  return <div {...stylex.props(styles.base, style)} />;
}

props として渡されたスタイルは、ローカルスタイルの後に適用するのが慣例です。この規則により、デザインシステムコンポーネントは予測可能に使用でき、簡単にカスタマイズできます。

スタイルの「設定解除」​

スタイルは適用するのではなく、削除する必要がある場合があります。CSS は initial、inherit、unset、revert などの値を提供しますが、StyleX でこれを行う最も簡単な解決策は、値を null に設定することです。

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

const styles = stylex.create({
  base: {
    color: null,
  },
});

スタイルプロパティを null に設定すると、StyleX によって以前に適用されたスタイルがすべて削除されます。