# Stripe Apps の Box コンポーネント ボックスは、他のコンポーネントをラップして、カスタムのスタイルやレイアウトを追加するために使用します。 # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/box?app-sdk-version=8. `Box` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {Box} from '@stripe/ui-extension-sdk/ui'; ``` ボックスはブロックレベルのエレメントで、`div` HTML エレメントに相当します。[カスタムスタイル](https://docs.stripe.com/stripe-apps/style.md#custom-styles)をサポートしています。インラインエレメントを表示またはスタイリングする場合は、[Inline](https://docs.stripe.com/stripe-apps/components/inline.md) コンポーネントをご覧ください。 ### Box プロパティ | プロパティー | タイプ | | ---------- | ------------------------------------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `css` | (オプション) `CSS | undefined` 関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/box.md#css)。 | ### CSS | プロパティー | タイプ | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `alignSelfX` | (オプション) `("start" | "center" | "end" | "stretch") | undefined` 水平方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。 | | `alignSelfY` | (オプション) `("top" | "center" | "baseline" | "bottom" | "stretch") | undefined` 垂直方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。 | | `alignX` | (オプション) `("start" | "center" | "end" | "stretch") | undefined` 水平方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。 | | `alignY` | (オプション) `("top" | "center" | "baseline" | "bottom" | "stretch") | undefined` 垂直方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。 | | `backgroundColor` | (オプション) `("container" | "surface") | undefined` | | `bleed` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedBottom` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedLeft` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedRight` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedTop` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedX` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedY` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `borderBottomColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderBottomLeftRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderBottomRightRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderBottomStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderBottomWidth` | (オプション) `number | undefined` 枠線の幅。 | | `borderColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderLeftColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderLeftStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderLeftWidth` | (オプション) `number | undefined` 枠線の幅。 | | `borderRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderRightColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderRightStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderRightWidth` | (オプション) `number | undefined` 枠線の幅。 | | `borderStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderTopColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderTopLeftRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderTopRightRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderTopStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderTopWidth` | (オプション) `number | undefined` 枠線の幅。 | | `borderWidth` | (オプション) `number | undefined` 枠線の幅。 | | `bottom` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `boxShadow` | (オプション) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `color` | (オプション) `("brand" | "primary" | "secondary" | "disabled" | "info" | "success" | "attention" | "critical") | undefined` | | `columnGap` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `display` | (オプション) `"grid" | undefined` | | `distribute` | (オプション) `("packed" | "space-between") | undefined` | | `fill` | (オプション) `("brand" | "primary" | "secondary" | "disabled" | "info" | "success" | "attention" | "critical") | undefined` | | `focusRing` | (オプション) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `font` | (オプション) `("body" | "bodyEmphasized" | "caption" | "heading" | "kicker" | "lead" | "subheading" | "subtitle" | "title") | undefined` | | `fontFamily` | (オプション) `("monospace" | "ui") | undefined` | | `fontWeight` | (オプション) `("regular" | "semibold" | "bold") | undefined` | | `gap` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gapX` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gapY` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gridColumns` | (オプション) `number | undefined` | | `height` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの高さ。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `inset` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `keyline` | (オプション) `("neutral" | "critical") | undefined` | | `left` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `margin` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginBottom` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginLeft` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginRight` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginTop` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginX` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginY` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `maxHeight` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの高さ。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `maxWidth` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `minHeight` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの高さ。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `minTileWidth` | (オプション) `(number | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` | | `minWidth` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `overflow` | (オプション) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `overflowWrap` | (オプション) `("break-word" | "normal") | undefined` | | `overflowX` | (オプション) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `overflowY` | (オプション) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `padding` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingBottom` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingLeft` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingRight` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingTop` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingX` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingY` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `rowGap` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `stack` | (オプション) `("x" | "y" | "z") | undefined` | | `textAlign` | (オプション) `("center" | "end" | "justify" | "left" | "match-parent" | "right" | "start") | undefined` | | `textOverflow` | (オプション) `"ellipsis" | undefined` | | `textTransform` | (オプション) `("capitalize" | "uppercase" | "lowercase" | "none" | "full-width" | "full-size-kana") | undefined` | | `top` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `topShadow` | (オプション) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `whiteSpace` | (オプション) `("normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces") | undefined` | | `width` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `wordBreak` | (オプション) `("normal" | "break-all" | "keep-all" | "break-word") | undefined` | | `wordWrap` | (オプション) `("break-word" | "normal") | undefined` | | `wrap` | (オプション) `("wrap" | "nowrap" | "wrap-reverse") | undefined` | | `zIndex` | (オプション) `("overlay" | "partial") | undefined` | | `background` | (オプション)(非推奨) 代わりに `backgroundColor` プロパティを使用してください。 `("container" | "surface") | undefined` | | `isolatedDependencies` | (オプション)(非推奨) `string[] | undefined` | | `layout` | (オプション)(非推奨) 代わりに `stack` プロパティを使用してください。 `("column" | "inline" | "row" | "inline-column" | "inline-row") | undefined` | | `when` | (オプション)(非推奨) 代わりに、ネストされたスタイルを使用します。 `(string | { pointer: "none" | "coarse" | "fine"; colorScheme: "dark" | "light"; motion: "supported" | "reduced"; hover: "none" | "hover"; viewportWidth: "small" | "medium" | "large" | "xlarge"; contrast: "more" | "less"; }[] | { pointer: "none" | "coarse" | "fine"; colorScheme: "dark" | "light"; motion: "supported" | "reduced"; hover: "none" | "hover"; viewportWidth: "small" | "medium" | "large" | "xlarge"; contrast: "more" | "less"; }) | undefined` | ## ボックスをネストする 一部のコンポーネントでは、ボックスを使用して、子のレイアウトと間隔を管理できます。たとえば、[AccordionItem](https://docs.stripe.com/stripe-apps/components/accordion.md) の内部にボックスをネストしてパディングを追加します。 ## カスタム CSS `Box` コンポーネントは [カスタムスタイル](https://docs.stripe.com/stripe-apps/style.md#custom-styles)をサポートします。この例では、`boxShadow` プロパティの使用例を示します。 # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/box?app-sdk-version=9. `Box` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {Box} from '@stripe/ui-extension-sdk/ui'; ``` ボックスはブロックレベルのエレメントで、`div` HTML エレメントに相当します。[カスタムスタイル](https://docs.stripe.com/stripe-apps/style.md#custom-styles)をサポートしています。インラインエレメントを表示またはスタイリングする場合は、[Inline](https://docs.stripe.com/stripe-apps/components/inline.md) コンポーネントをご覧ください。 ### Box プロパティ | プロパティー | タイプ | | ---------- | ------------------------------------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `css` | (オプション) `CSS | undefined` 関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/box.md#css)。 | ### CSS | プロパティー | タイプ | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `alignSelfX` | (オプション) `("start" | "center" | "end" | "stretch") | undefined` 水平方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。 | | `alignSelfY` | (オプション) `("top" | "center" | "baseline" | "bottom" | "stretch") | undefined` 垂直方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。 | | `alignX` | (オプション) `("start" | "center" | "end" | "stretch") | undefined` 水平方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。 | | `alignY` | (オプション) `("top" | "center" | "baseline" | "bottom" | "stretch") | undefined` 垂直方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。 | | `backgroundColor` | (オプション) `("container" | "surface") | undefined` | | `bleed` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedBottom` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedLeft` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedRight` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedTop` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedX` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `bleedY` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `borderBottomColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderBottomLeftRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderBottomRightRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderBottomStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderBottomWidth` | (オプション) `number | undefined` 枠線の幅。 | | `borderColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderLeftColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderLeftStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderLeftWidth` | (オプション) `number | undefined` 枠線の幅。 | | `borderRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderRightColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderRightStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderRightWidth` | (オプション) `number | undefined` 枠線の幅。 | | `borderStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderTopColor` | (オプション) `("neutral" | "critical") | undefined` | | `borderTopLeftRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderTopRightRadius` | (オプション) `("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined` | | `borderTopStyle` | (オプション) `("dashed" | "dotted" | "double" | "groove" | "hidden" | "inherit" | "initial" | "inset" | "none" | "outset" | "revert-layer" | "revert" | "ridge" | "solid" | "unset") | undefined` | | `borderTopWidth` | (オプション) `number | undefined` 枠線の幅。 | | `borderWidth` | (オプション) `number | undefined` 枠線の幅。 | | `bottom` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `boxShadow` | (オプション) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `color` | (オプション) `("brand" | "primary" | "secondary" | "disabled" | "info" | "success" | "attention" | "critical") | undefined` | | `columnGap` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `display` | (オプション) `"grid" | undefined` | | `distribute` | (オプション) `("packed" | "space-between") | undefined` | | `fill` | (オプション) `("brand" | "primary" | "secondary" | "disabled" | "info" | "success" | "attention" | "critical") | undefined` | | `focusRing` | (オプション) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `font` | (オプション) `("body" | "bodyEmphasized" | "caption" | "heading" | "kicker" | "lead" | "subheading" | "subtitle" | "title") | undefined` | | `fontFamily` | (オプション) `("monospace" | "ui") | undefined` | | `fontWeight` | (オプション) `("regular" | "semibold" | "bold") | undefined` | | `gap` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gapX` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gapY` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `gridColumns` | (オプション) `number | undefined` | | `height` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの高さ。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `inset` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `keyline` | (オプション) `("neutral" | "critical") | undefined` | | `left` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `margin` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginBottom` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginLeft` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginRight` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginTop` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginX` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `marginY` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `maxHeight` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの高さ。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `maxWidth` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `minHeight` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの高さ。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `minTileWidth` | (オプション) `(number | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` | | `minWidth` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `overflow` | (オプション) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `overflowWrap` | (オプション) `("break-word" | "normal") | undefined` | | `overflowX` | (オプション) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `overflowY` | (オプション) `("visible" | "hidden" | "clip" | "scroll" | "auto") | undefined` | | `padding` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingBottom` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingLeft` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingRight` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingTop` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingX` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `paddingY` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `rowGap` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `stack` | (オプション) `("x" | "y" | "z") | undefined` | | `textAlign` | (オプション) `("center" | "end" | "justify" | "left" | "match-parent" | "right" | "start") | undefined` | | `textOverflow` | (オプション) `"ellipsis" | undefined` | | `textTransform` | (オプション) `("capitalize" | "uppercase" | "lowercase" | "none" | "full-width" | "full-size-kana") | undefined` | | `top` | (オプション) `(number | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge") | undefined` | | `topShadow` | (オプション) `("none" | "base" | "top" | "hover" | "focus") | undefined` | | `whiteSpace` | (オプション) `("normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces") | undefined` | | `width` | (オプション) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 | | `wordBreak` | (オプション) `("normal" | "break-all" | "keep-all" | "break-word") | undefined` | | `wordWrap` | (オプション) `("break-word" | "normal") | undefined` | | `wrap` | (オプション) `("wrap" | "nowrap" | "wrap-reverse") | undefined` | | `zIndex` | (オプション) `("overlay" | "partial") | undefined` | ## ボックスをネストする 一部のコンポーネントでは、ボックスを使用して、子のレイアウトと間隔を管理できます。たとえば、[AccordionItem](https://docs.stripe.com/stripe-apps/components/accordion.md) の内部にボックスをネストしてパディングを追加します。 ## カスタム CSS `Box` コンポーネントは [カスタムスタイル](https://docs.stripe.com/stripe-apps/style.md#custom-styles)をサポートします。この例では、`boxShadow` プロパティの使用例を示します。 ## See also - [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md) - [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md) - [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)