---
title: CSSカスタムプロパティ
description: "Yamada UIは、CSSカスタムプロパティを簡単に作成・使用する機能を提供しています。"
---

## 使い方

[CSSカスタムプロパティ(変数)](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties)を作成するには、`--`のプレフィックスを付けたプロパティをpropsまたは`css`に設定します。

```tsx
<Box css={{ "--bg": "#d4d4d4" }} {...{ "--fg": "black" }} />
```

カスタムプロパティを参照するには、CSSの[var](https://developer.mozilla.org/ja/docs/Web/CSS/var)を使用するか、`{}`([インターポレーション](https://yamada-ui.com/docs/styling/interpolation.md))を使用します。

```tsx
<Box
  p="md"
  css={{ "--bg": "#d4d4d4" }}
  {...{ "--fg": "black" }}
  bg="var(--bg)"
  color="{fg}"
>
  Box
</Box>
```

:::warning
設定したカスタムプロパティは、設定した要素の子要素にのみ適用されます。
:::

また、カスタムプロパティは[テーマ](https://yamada-ui.com/docs/theming.md)のトークンを参照することができます。

```tsx
<Box
  p="md"
  css={{ "--bg": "colors.bg.contrast" }}
  {...{ "--fg": "colors.fg.contrast" }}
  bg="var(--bg)"
  color="{fg}"
>
  Box
</Box>
```