CSSカスタムプロパティ

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

使い方

CSSカスタムプロパティ(変数)を作成するには、--のプレフィックスを付けたプロパティをpropsまたはcssに設定します。

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

カスタムプロパティを参照するには、CSSのvarを使用するか、{}(インターポレーション)を使用します。

Box

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

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

また、カスタムプロパティはテーマのトークンを参照することができます。

Box

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