CSS Custom Properties

Yamada UI provides features to easily create and reference CSS custom properties.

Usage

To create a CSS custom property (variable), set a property with the -- prefix in either props or css.

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

To reference custom properties, use CSS var or {} (interpolation).

Box

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

Custom properties you set will only apply to child elements of the element where they are defined.

Additionally, custom properties can reference theme tokens.

Box

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