Repository navigation
How to use variants with Box, Flex, etc.? #2010
Description
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.
BoxFlex- 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?
Activity
lachlanjc commentedon Nov 13, 2021
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, orvariant="layout.container"to add Container's styling. (See the former in use here.)