Factory props

Besides style props (bg, px, color), every styled() component accepts a few extra props. They are not CSS utilities. The factory reads them itself.

Style props stay on Style props. A recipe on styled() is Styled factory.

import { styled } from '../styled-system/jsx'
 
const Button = styled('button')

css

An extra style object, merged last among styles. Use it for conditions, selectors, or a style you already have as an object.

<Button
  bg="blue.500"
  css={{
    _hover: { bg: 'blue.600' },
    '&[data-active]': { bg: 'blue.700' }
  }}
>
  Click me
</Button>

One override on a custom component is also css. Named parts use trackCss, slideCss, and so on. See passing styles to custom components.

className

Appended after the factory classes. Use it for a class you do not control, or a string from outside Panda.

<Button bg="blue.500" className="external">
  Click me
</Button>

as

Render a different element. Style props still apply.

<Button as="a" href="https://panda-css.com" bg="blue.500">
  Docs
</Button>

HTML attributes

width, height, translate, and content are style props, so they do not reach the DOM. Use the html* aliases when you need the HTML attribute.

const Img = styled('img')
 
<Img htmlWidth="40" htmlHeight="40" src="/logo.png" alt="" />

See also

• Style props
• Styled factory
• Merging styles
• jsx/ reference