How to add sx prop to user-defined component?

[PeterlitsZo]

I use this to did it, but I am not sure...:

const Comp = (props) => {
  <div className={props.className} sx={{width: 1}}/>
}

I find if I use:

<Comp sx={{height: 1}} />

It will set the props.className to some string aaaaaa, and then it will mixin to make its className is bbbbbb.

If it true, I can help you to update document in sx-prop.

[hasparus]

If you use JSX pragma, every sx gets translated into className, what's more, you can combine sx and className and they will be merged.

Do you think this is something that's not covered in the docs too well?

[PeterlitsZo]

Yes, of course. I want to update document with a PR. wait for minute.

[PeterlitsZo]

For make it more clear, does it work for every JSX bulid by theme-ui?