Jsx Factory

Style props are opt-in features in Panda. They aren't enabled by default. In this lesson, I'll show you how to set it up in your panda.config file.

Enable Style Props

Style props are not enabled by default in Panda CSS. To enable them, set the jsxFramework as react.

jsxFramework: 'react'

This setup automatically creates a styled-system/jsx directory. The directory includes the JSX factory for authoring styles.

Using Style Props

Now, you can convert a div to a Box and use style props.

Here's what the code looks like without style props

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

const Demo = () => {
  return (
    <div className={css({ minH: '100dvh', bg: '#000', pt: '180px', px: '24px', color: '#FFF' })}>
      This is a box
    </div>
  )
}

Here's what it looks like with style props

import { Box } from '../styled-system/jsx'

const Demo = () => {
  return (
    <Box minH="100dvh" bg="#000" pt="180px" px="24px" color="#FFF">
      This is a box
    </Box>
  )
}