CSSカスタムプロパティ(変数)
Yamada UIのStyle PropsでCSSカスタムプロパティ(変数)を作成・参照することができます。
Yamada UIのスタイルシステムを使用する上でカスタムプロパティが必要になるケースは、ほとんどありません。この機能は、他のライブラリのコンポーネントにYamada UIのテーマトークンなどを参照したい場合に有効です。
使い方
Style Propsのvarsを使用して、CSSカスタムプロパティ(変数)を作成します。
name: カスタムプロパティの名前。token: カスタムプロパティの値を取得するためのトークン。value: カスタムプロパティの値。
vars={[{ name: "bg", token: "colors", value: "primary" }]}
上記のコードは、次のようなCSSが生成されます。
.Box {--ui-bg: var(--ui-colors-primary);}
カスタムプロパティのプレフィックス(ui)は、コンフィグをカスタマイズすることで変更することができます。
詳しくは、こちらををご覧ください。
カスタムプロパティを参照するには、CSSのvarを使用するか、スタイルシステムの$(インターポレーション)を使用します。
編集可能な例
<Box p="md" rounded="md" vars={[ { name: "bg", token: "colors", value: "primary" }, { name: "color", token: "colors", value: "white" }, ]} bg="var(--ui-bg)" color="$color" > Box </Box>
varsで設定したカスタムプロパティは、設定した要素の子要素にのみ適用されます。
GitHubでこのページを編集する