インターポレーション
$(インターポレーション)は、スタイルシステム内でCSSカスタムプロパティ(変数)、またはテーマのトークンを参照するための機能です。
使い方
Style Propsのvarsを使用して、CSSカスタムプロパティ(変数)を作成した場合、設定したnameを$で参照することができます。
編集可能な例
<Box p="md" rounded="md" color="white" vars={[{ name: "bg", token: "colors", value: "primary" }]} bg="$bg" > Box </Box>
テーマのトークンを参照する
Yamada UIのStyle Propsは、対応するプロパティのみテーマのトークンが参照されます。例えば、borderRadiusは、radiiのトークンを参照しますが、spacesのトークンは参照されません。$を使用することで、対応するトークン以外を参照することができます。
編集可能な例
<Box p="md" rounded="$spaces.3" bg="primary" color="white"> Box </Box>
また、文字列内に$を使用することで、テーマのトークンを参照することができます。これは、borderなどの一括指定プロパティで有効です。
編集可能な例
<Box p="md" rounded="md" border="1px solid $colors.primary" color="primary"> Box </Box>
GitHubでこのページを編集する