How to pass props from parent to child component?

[grazianodev]

Maybe I'm missing something, but what are my options to pass a prop to a child component via its parent when using Panda? This doesn't work (due to property renaming, I believe):

// page.js
<Group padding="m" items={ items } itemPadding="m" />

// group.js
export default function Group( { items, itemPadding, padding } ) {
   return (
      <Box p={ padding }>
         { items.map( item => <Box p={ itemPadding }>{ item }</Box>) }
      </Box>
   )
}

I know custom variants or even utilities can be created, but that feels like a lot of work if you want to cover all cases (pt, pb, pr, pl, px, py, etc.), especially if eg. I also wanted to pass additional props such as a border.

[astahmer]

you can't rename css properties due to static limitations, see https://panda-css.com/docs/guides/dynamic-styling#property-renaming

what you can do instead: https://play.panda-css.com/1tnhBY14qG

[anubra266]

You can also use the special css prop which panda automatically understands

https://play.panda-css.com/JjXzPoYWuI

cc @astahmer