Understanding how the sx prop works, sx prop object composition, etc

I think understand the jsx pragma but have a couple questions about sx. 1: The pragma does not seem to be necessary for theme-ui components such as <Box />, but is is for the native/intrinsic html elements such as <div />s. Is this correct?

2: Perhaps ill-advised, I wanted to create a custom component that would have its own internal styles that could be overridden, essentially ({ sx = {}, ...props }) => <Text sx={ ...rootStyles, ...sx } ...props />. This did not work when using the jsx pragma, which leads me to think babel is actually wiping away my non-standard sx prop - I can even log it and see that it is always {}. Is this assumption correct? I can probably just work around it using variants and plain text in any case, but wondering.

[dburles]

1. Correct, though there’s no reason not to use it as you’ll probably be mixing them with your own components or elements.

2. All you need to do is ensure that the className prop is passed through to the child element.

const Button = (props) => {
  return (
    <button
      {...props}
      sx={{
        backgroundColor: 'red',
        padding: 3,
      }}
    />
  );
};

export default Button;

[erikdstock]

Thanks! Closing as my immediate issue is resolved.