---
title: インターポレーション
description: "Yamada UIでCSSカスタムプロパティ(変数)やテーマのトークンに簡単にアクセスできる機能を提供しています。"
---

## 概要

インターポレーションは、[CSSカスタムプロパティ(変数)](https://yamada-ui.com/docs/styling/css-custom-properties.md)または[テーマ](https://yamada-ui.com/docs/theming.md)のトークンを参照するための機能です。

## 使い方

[CSSカスタムプロパティ(変数)](https://yamada-ui.com/docs/styling/css-custom-properties.md)で設定したプロパティ名を`{custom-property-name}`で参照することができます。

```tsx
<Box p="md" {...{ "--custom-bg-color": "#1ba14c" }} bg="{custom-bg-color}">
  Box
</Box>
```

### テーマのトークンを参照する

Yamada UIの[Style Props](https://yamada-ui.com/docs/styling/style-props.md)は、対応する[テーマ](https://yamada-ui.com/docs/theming.md)のトークンのみ参照されます。例えば、`borderRadius`は、`radii`のトークンを参照しますが、`spaces`のトークンは参照されません。`{}`を使用することで、対応するトークン以外を参照することができます。

```tsx
<VStack>
  <Box p="md" rounded="l2" borderWidth="1px">
    Box
  </Box>

  <Box p="md" rounded="{spaces.md}" borderWidth="1px">
    Box
  </Box>
</VStack>
```

また、文字列内に`{}`を使用することで、[テーマ](https://yamada-ui.com/docs/theming.md)のトークンを参照することができます。これは、[border](https://developer.mozilla.org/ja/docs/Web/CSS/border)などの[一括指定プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/Shorthand_properties)で有効です。

```tsx
<Box p="md" border="{sizes.1} solid {colors.success}">
  Box
</Box>
```