How to use variants with Box, Flex, etc.?

[TranquilMarmot]

Looking at the docs here: https://theme-ui.com/components/variants

It says:

The following components support the variant prop, but do not include default variant keys.

• Box
• Flex
• etc.

But it does not specify how to use variant with those components. I see with other components, there is a specific "Variant group" in the table (i.e. Grid goes with grids, Button goes with buttons) but there's no variant group for Box or Flex.

Using the Theme type to specify a theme in TypeScript, there is no way to add a boxes variant group. The Box component seems to be looking at a variants key but you also cannot add that in TypeScript.

How do you define variants for Box and all of the other components that don't have their own variant group?

[lachlanjc]

Ah, we should totally make this clearer! If there's no theme key, that means you can use any variant from anywhere in the theme, but it needs a category prefix. E.g. you can write <Grid variant="cards.sunken" to make a Grid look like a Card, or variant="layout.container" to add Container's styling. (See the former in use here.)