stylex.props

StyleX スタイルまたは StyleX スタイルの配列を受け取り、プロパティオブジェクトを返します。値は null、undefined、または false にすることもできます。

戻り値は、スタイルを直接適用する要素に渡す必要があります。

Solid、Svelte、Qwik、Vue、その他のフレームワークの場合: stylex.attrs

className の代わりに class を期待するフレームワークの場合は、代わりに style.attrs を使用します。それ以外は stylex.props と同じように使用します。

function props(styles: StyleXStyles | StyleXStyles[]): {
  className: string;
  style: {[key: string]: string};
};

使用例:

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

const styles = stylex.create({
  root: {
    backgroundColor: 'red',
    padding: '1rem',
    paddingInlineStart: '2rem',
  },
  conditional: {
    backgroundColor: 'blue',
  },
  dynamic: (opacity) => ({
    opacity,
  }),
});

<div
  {...stylex.props(
    styles.root,
    condition && styles.conditional,
    props.style,
    styles.dynamic(state.opacity),
  )}
/>;