Convert to JSX Component

To use a recipe, we’ve always had to pass it into an element’s classname However, we can intantly convert a recipe to a reusable JSX Component.

The easiest way to convert a recipe to a component is to use the styled function from the /jsx entrypoint.

The styled function takes the element type as its first argument, and the recipe as its second argument.

import { cva } from '../styled-system/css'
import { styled } from '../styled-system/jsx'

const buttonStyle = cva({
  base: {
    color: 'red',
    textAlign: 'center',
  },
  variants: {
    size: {
      small: {
        fontSize: '1rem',
      },
      large: {
        fontSize: '2rem',
      },
    },
  },
})

const Button = styled('button', buttonStyle)

Now, you can use the component in JSX

<Button size="large">Click me</Button>