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

静的型

スタイルプロパティの型​

StyleX は静的型を完全にサポートしています。最も一般的なユーティリティ型は、任意の StyleX スタイルを受け入れるために使用される StyleXStyles です。

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

type Props = {
  ...
  style?: StyleXStyles,
};

function MyComponent({style, ...otherProps}: Props) {
  return (
    <div
      {...stylex.props(localStyles.foo, localStyles.bar, style)}
    >
      {/* ... */}
    </div>
  );
}
動的スタイルの禁止

StaticStyles は、任意の静的スタイルを受け入れるが、動的スタイルを許可しない場合、StyleXStyles の代わりに使用できます。

受け入れるスタイルの制約​

型引数は、受け入れるスタイルを制限するために StyleXStyles<{...}> で使用できます。

スタイルプロパティのセットからの受け入れ​

受け入れるスタイルプロパティを特定のセットに制限するには、許可されたプロパティを持つオブジェクト型を使用できます。

import type {StyleXStyles} from '@stylexjs/stylex';

type Props = {
  // ...
  style?: StyleXStyles<{
    color?: string;
    backgroundColor?: string;
    borderColor?: string;
    borderTopColor?: string;
    borderEndColor?: string;
    borderBottomColor?: string;
    borderStartColor?: string;
  }>;
};

style プロパティは、定義されたプロパティのみを受け入れ、それ以外のものは許可しません。

優れたデフォルトスタイル

スタイル型のキーをオプションにし、コンポーネント自体にベースラインスタイルを設定するのが良いプラクティスです。

TypeScript は追加のスタイルプロパティをキャッチしない可能性がある

TypeScript のオブジェクト型は、追加のプロパティを持つオブジェクトが与えられた場合でもエラーになりません。この問題を軽減するための措置を講じましたが、型エラーなしで追加の許可されていないスタイルを渡せるエッジケースが存在する可能性があります。

スタイルの可能な値を制限する​

受け入れられるスタイルプロパティに加えて、それらのプロパティの値も制約できます。

import type {StyleXStyles} from '@stylexjs/stylex';

type Props = {
  ...
  // Only accept styles for marginTop and nothing else.
  // The value for marginTop can only be 0, 4, 8 or 16.
  style?: StyleXStyles<{
    marginTop: 0 | 4 | 8 | 16
  }>,
};

これで、このコンポーネントは marginTop プロパティを持ち、他のプロパティを持たないスタイルのみを受け入れるようになりました。 marginTop の値は、0、4、8、または 16 のいずれかになります。

プロパティの禁止​

許可リストではなく、ブロックリストを定義する方が便利な場合があります。

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

type NoLayout = StyleXStylesWithout<{
  position: unknown,
  display: unknown,
  top: unknown,
  start: unknown,
  end: unknown,
  bottom: unknown,
  border: unknown,
  borderWidth: unknown,
  borderBottomWidth: unknown,
  borderEndWidth: unknown,
  borderStartWidth: unknown,
  borderTopWidth: unknown,
  margin: unknown,
  marginBottom: unknown,
  marginEnd: unknown,
  marginStart: unknown,
  marginTop: unknown,
  padding: unknown,
  paddingBottom: unknown,
  paddingEnd: unknown,
  paddingStart: unknown,
  paddingTop: unknown,
  width: unknown,
  height: unknown,
  flexBasis: unknown,
  overflow: unknown,
  overflowX: unknown,
  overflowY: unknown,
}>;

type Props = {
  // ...
  style?: NoLayout,
};

function MyComponent({style, ...}: Props) {
  return (
    <div
      {...stylex.props(localStyles.foo, localStyles.bar, style)}
    >
      {/* ... */}
    </div>
  );
}

ここでは、オブジェクト型にリストされたプロパティは禁止されますが、他のすべてのスタイルは引き続き受け入れられます。