Responsive Props
CSS Props は、次の2通りの指定方法によってレスポンシブに対応できます。
- 配列で順番に指定（ base → sm → md → …）
- オブジェクトで直接ブレイクポイントを指定
どちらも最終的に出力されるHTMLは同じで、ユーティリティクラスとカスタムプロパティのペアで出力されます。
↓
例1
<Box p={['20', '30', '5rem']}> ...</Box>CSS側でクラスが用意されていないと実際に値は切り替わりません。デフォルトでレスポンシブ対応されていないプロパティは、追加のカスタマイズが必要です。
途中のポイントをスキップする場合は次のようになります。
↓
例2:
@mdの値のみ指定<Box p={[null, null, '40']}> ...</Box>