Variant on components

At the moment, this is the best way I found to render components based on state:

const useStyles = ({ variant }) => ({
  fontWeight: 'bold',
  py: 2,
  px: 4,
  rounded: 'full',
  fontSize: 'xs',
  d: 'inline-block',

  ...variant === 'full' && {
    bg: 'tomato',
    color: 'white',
  },

 ...variant === 'outlined' && {
    bg: 'tomato',
    color: 'white',
  },

});

  const stylesProps = useStyles(props)
  return <Box {...stylesProps} />

Is this a good pattern ? Is there any better solution ?

[segunadebayo]

Hi @bulby97,

Your solution works for now. I understand it’s a bit painful to handle variants that way.

We’re solved this permanently in the next release. Let me give you a glimpse:

1. You will be able to use the sxprop in any component
2. You can define a component schema to support different variants, sizes and color schemes.

// step 1: define component schema in theme.components
const theme = {
  components: {
    MyComponent: {
      // you can define variants
      variants: {
        outlined: {}, // your style props
        full: {}, // your style props
      },
      // you can also define sizes
      sizes: {
        small: {}, // your style props
        big: {}, // your style props
      },
    },
  },
}

// step 2: create a chakra component
const MyComponent = createChakra("button", { themeKey: "MyComponent" })

// step 3: Just use the component :)
<MyComponent variant="outlined" size="small"/>

[segunadebayo]

@bulby97, it’s mostly to have one source of truth for component styles and variants.

This means you can simply import any Chakra components, and override their “global” style from the theme or even make your own styles.

It improves the themeability experience, and ensure all apps built with Chakra don’t look the same 😀