Box does not accept variants in theme

[hutber]

Currently it seems I am unable to use a variant on the Box component. I believe this is not meant to be the case?

 <Box
      variant="share"
    >

Output:

<div variant="share" class="css-0"></div>

Versions:

    "@chakra-ui/color-mode": "^1.0.0-next.3",
    "@chakra-ui/core": "^1.0.0-rc.7",
    "@chakra-ui/media-query": "^1.0.0-rc.7",

Theme:

Output:

[segunadebayo]

Hi @hutber,

Box is a generic component and cannot accept variant in theme. I'd recommend that you create a wrapper component and use the useStyleConfig described there: https://next.chakra-ui.com/docs/theming/component-style#usestyleconfig-api

You can also consider using the layer and text styles described here: https://next.chakra-ui.com/docs/features/text-and-layer-styles

[ljosberinn]

On a sidenote, you have version mismatching going on there:

"@chakra-ui/color-mode": "^1.0.0-next.3",
    "@chakra-ui/core": "^1.0.0-rc.7",
    "@chakra-ui/media-query": "^1.0.0-rc.7",

they should all be on the same version, notably rc.8 and unless you explicitly use one of those modules, there's no reason to install anything besides @chakra-ui/core.

[hutber]

Thank you guys, it would be great if there was a list of items that weren't styleable?

[with-heart]

Box should be the only one!

[davisuga]

Box should be the only one!

And Flex too

[LucasZapico]

I know this is closed, but it would be great to throw an error or warning on this. I spun on this for a bit trying to debug before I did the trusty Google search. 🤷‍♂️

[omarryhan]

Box is a generic component and cannot accept a variant theme.

Is this a technical limitation @segunadebayo? Because from an API design perspective, I think it's confusing.

My use case: I want to create a card, and I think a div/Box is the most relevant element from ChakraUI. Any alternative that you'd recommend?

[ndewhurst]

FWIW the links from Segun's comment were broken when I tried to access them, but these appear to be the corresponding URLs for the current documentation:

• https://chakra-ui.com/docs/theming/component-style#usestyleconfig-api
• https://chakra-ui.com/docs/features/text-and-layer-styles