[Question] How to implement custom component aware of `sx`?

Hi, I’d like to write a custom component based on theme-ui elements with a structure where children are aware of sx prop of the parent.

Let say:

export const FooComponent = forwardRef(
  (
    { sx: sxParent, ...rest },
    ref,
  ) => {
    console.log(sxParent, rest)

    return (
      <Box {...rest} ref={ref}>
        <Text sx={{ backgroundColor: sxParent.backgroundColor || 'black' }}>
           foo
        </Text>
      </Box>
    )
  },
)

I noticed that if in the file where I call FooComponent the jsx pragma is present then sxParent is converted to a { className: 'css-wo3z44' }, otherwise it is the original object (let say a valid SxStyleProp object).

How can I handle this? Should I need to parse the css-wo3z44 somehow?

[wereHamster]

I never use the jsx pragma, and instead passthrough sx to the underlying theme-ui component, eg.

export const Foo = ({ sx, ...props }) => (
  <Box sx={{ m: 3, ...sx }} {...props}>…</Box>
)

[hasparus]

Yes, sx prop is transformed by jsx pragma, similarly to how Emotion’s jsx pragma consumes css prop.

You can use any other prop name. If you want to reuse a name you’re already using, style should be okay, albeit a little confusing. I’d probably go with styles or pass just backgroundColor as a prop.