インターポレーション

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

概要

インターポレーションは、CSSカスタムプロパティ(変数)またはテーマのトークンを参照するための機能です。

使い方

CSSカスタムプロパティ(変数)で設定したプロパティ名を{custom-property-name}で参照することができます。

Box

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

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

Yamada UIのStyle Propsは、対応するテーマのトークンのみ参照されます。例えば、borderRadiusは、radiiのトークンを参照しますが、spacesのトークンは参照されません。{}を使用することで、対応するトークン以外を参照することができます。

Box

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

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

また、文字列内に{}を使用することで、テーマのトークンを参照することができます。これは、borderなどの一括指定プロパティで有効です。

Box

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