How to add sx prop to user-defined component? #2118

PeterlitsZo · 2022-02-07T11:45:27Z

PeterlitsZo
Feb 7, 2022

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.

Answered by 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?

hasparus · 2022-02-07T13:07:16Z

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?

2 replies

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

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