sx prop not applied in Storybook, but applied successfully in Next.js app

[seisenreich]

Describe the bug
Me and my team use Storybook, Next.JS, Theme UI and emotion/css + emotion/styled with TypeScript to build a frontend with a custom UI kit.
After using Styled System with Styled Components we decided to merge over to Theme UI with emotion due to better maintenance and active community.

We faced a few problems to get that tech stack working.
One of them being storybook not supporting emotion v11 used by Theme UI. We could fix it by applying this solution.

Everything builds just fine: The Next.js app builds fine, Storybook builds fine.
Theme properties can be accessed successfully in both, the Next.js app and storybook from emotion/styled components and from react components using the useTheme hook.
sx prop styling works fine in the Next.js app.
But any styling that should be applied from the sx prop is ignored in Storybook. And I don't get why.

Maybe you can help me with this?
I'm not sure what information I have to give you so you can actually help me.
Just ask me if something's missing.

I built a small repo for you to reproduce the issue.
The most of my actual projects config files and the essential dependencies are uploaded there.

To Reproduce

Steps to reproduce the behavior:

1. Head over to the public repo I built for you to be able to reproduce the issue: https://github.com/seisenreich/theme-ui-storybook-sx-prop-issue
2. Follow the steps in README.md to setup the project locally on your machine

Screenshots

[fcisio]

Hey @seisenreich I believe this is a duplicate issue.

Both Theme UI and Storybook use Emotion, but they use different versions of it. (11 and 10, respectively). The problem occurs because since 0.5, Theme UI uses new Emotion, while Storybook still uses the old one. You can work around it by as described in #1530.

[seisenreich]

Hi @fcisio ,

I thought so at first, too.
But the workaround stated here in the issue only fixed storybook from throwing errors and enabled me to use theme variables in there.

What didn't get fixed was the support of the sx prop.
So I opened a separate one.

I don't know if the problem is caused by the same thing, though.
It's absolutely possible that my issue has the same source as the problems described in #1530 .

[seisenreich]

Also the styles in my case look a bit different.
The number of classes applied to the elements does not differ between Next and Storybook.

Fun thing you can see here:
When using sx prop on a styled component the styles are simply not applied to the class,
when using sx prop on a simple button element the sx prop isn't even converted to a class. There you can the that sx is sx="[object Object]"

[hasparus]

There you can the that sx is sx="[object Object]"

Okay, so the JSX pragma running in Storybook doesn't know about sx prop.
Is your Storybook using the same Babel config as your Next.js app?

Edit: I cloned your repo and managed to fix it.

Add the following to .storybook/.babelrc to tell Storybook about your Babel setup.

{
  "extends": "../babel.config.js"
}

---

Explanation: The part of configuration that makes sx prop work on intrinsic elements like <div /> is this:

    [
      "next/babel",
      {
        "preset-react": {
          importSource: "theme-ui",
          runtime: "automatic",
          throwIfNamespace: false,
        },
      },
    ]

We tell Next's Babel Preset to tell Babel Preset React that all JSX will be from now on handled by jsx function automatically imported from theme-ui.

Storybook didn't detect your Babel config, so no JSX pragma there.

---

Thanks for the repro, @seisenreich, it helped a lot.

Screenshot after my change:

[seisenreich]

Thank you very much for not only providing the solution to the problem, but also explaining why that was a problem.

You never stop learning, I guess 👍
Have a nice day!

[hasparus]

No problem!