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.)

[lachlanjc]

Funky! That should work either way. We’ve got a test for this functionality on the Box component, but not on Flex. Is it only happening on Flex or is the variant prop broken elsewhere?

[CamilleHbp]

Sorry, I'll try to check tomorrow and answer you! I keep missing those GitHub notifications. 😞

[CamilleHbp]

It does not seem to work with the Box component either. I'm wondering if I'm doing something wrong.

[lachlanjc]

Can you share your theme & the code you're having issues with?

[CamilleHbp]

Okay, I found out my issue. It had nothing to do with theme-ui. I had a problem in the build process of my library. I fixed it by having vite preserve the jsx import. Sorry for the inconvenience!