Custom React components with an sx prop can’t live alongside HTML elements using the @jsxImportSource theme-ui pragma about theme-ui HOT 4 OPEN

If this is closed source, I'd like to see the Gatsby config and Babel and TypeScript configs.

It seems that the issue is somewhere around JSX runtime configuration, so the config files might lead us towards the cause.

from theme-ui.

Thank you for the issue!

What framework are you using? And what version of Theme UI do you have?

What I mean by it, this is weird and not intended. Both the tests here and all my apps using Theme UI would entirely break if this happened to me, so let's try to figure out why it happens, what kind of setup do you have.

from theme-ui.

Hi, and thanks for the prompt reply!

We’re using theme-ui 0.15.5, and the bug is exhibited both in a couple of applications that consume these components; one is a Gatsby application, and the other is a craco app.

The components we build using Theme UI are part of a design system monorepo which are published as private npm packages (containing CJS/ESM), then consumed by various internal applications (mostly some variety of create react app), as well as the two main apps I mentioned above (one is used as our internal documentation site, the other is essentially for visual regression testing). To try and streamline the experience for internal developers, we publish our own theme package which wraps most of the theme-ui dependencies, along with providing our theme defaults.

Does that answer your questions, or are there any other specifics that would be helpful?

from theme-ui.

I have the same problem with NextJs 14.

In fact I have to change the name to ssx in order to be ok with Theme UI style system, so like

<Comp ssx={{ mt: 30 }} />

export default function Comp({ children, ssx }: Props) {
  return <div sx={ssx}>{children}</div>
}

I'm using the tsconfig in order to avoid putting the pragma at every .tsx file

The reason is probably here. It just check if key === 'sx', and skips it. It should check if it's a React component, and not a primitive one (like h1, h2, div, etc.). I should be able to call a prop sx in a React component.

// theme-ui/packages/core/src/parseProps.tsx

export function parseProps(props: any) {
  if (!props || (!props.sx && !props.css)) return props

  const next: Record<string, unknown> = {}

  for (let key in props) {
    if (key === 'sx') continue
    next[key] = props[key]
  }

  next.css = getCSS(props)
  return next
}

from theme-ui.