Responsive Props

CSS Props は、次の2通りの指定方法によってレスポンシブに対応できます。

1. 配列で順番に指定（ base → sm → md → …）
2. オブジェクトで直接ブレイクポイントを指定

どちらも最終的に出力されるHTMLは同じで、ユーティリティクラスとカスタムプロパティのペアで出力されます。

<Box p={['20', '30', '5rem']}>
  ...
</Box>

<Box p={{ base: '20', sm: '30', md: '5rem' }}>
  ...
</Box>

<div class="l--box -p:20 -p@sm -p@md" style="--sm-p:var(--s30);--md-p:5rem">
  ...
</div>

途中のポイントをスキップする場合は次のようになります。

<Box p={[null, null, '40']}>
  ...
</Box>

<Box p={{ md: '40' }}>
  ...
</Box>

<div class="l--box -p@md" style="--md-p:var(--s40)">
  ...
</div>

レスポンシブ対応プロパティについて

コンポーネントの実装としては上記の書き方でどのCSS Propsにも対応していますが、実際にレスポンシブ対応のCSSが用意されているものしか切り替わりません。

標準でレスポンシブ切り替えに対応されているプロパティかどうかを調べるには、CSS Propsの各プロパティごとの BP（ブレイクポイントの略） の欄を確認してください。