Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Box does not accept variants in theme

See original GitHub issue

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:

Issue Analytics

State:
Created 3 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

8reactions

segunadebayocommented, Nov 11, 2020

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

7reactions

omarryhancommented, Dec 14, 2021

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?

Top Results From Across the Web

Variants - Theme UI

Variants allow you to define the styles used across multiple buttons, typographic elements, or any element in your theme object.

Adding variants - Shopify Help Center

As you add the product options, a list of variants appears. Uncheck the boxes next to any combination of options that you don't...

Reflexbox - Rebass

Add a variants object to your theme and include any variants as style objects. These styles can reference other values in your theme...

Typography - Material UI - MUI

You can change the font family with the theme.typography.fontFamily property. ... Fonts will not be embedded within your bundle. They will be loaded...

MUI v5 - Extending Typography variant in TypeScript creates ...

No overload matches this call. "Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { align?: " ...