integrating theme-ui with storybook in a gatsby project

Hi,

I have a gatsby project where I have integrated theme-ui. Now i am trying to incorporate storybook in the project so I can develop a component library for my project.

I want my components to rely on theme-ui and the sx prop for styling but when i write stories, they render in the storybook UI without the style applied.

I am a bit lost on how to debug this.

this is what the relevant portion of my .storybook/config.js file looks like

import { configure, addDecorator } from '@storybook/react';
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from '../src/gatsby-plugin-theme-ui/index'

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator((story) => (
  <ThemeProvider theme={theme}>
    {story()}
  </ThemeProvider>
))

configure(loadStories, module);

Any help on where to start debugging this are appreciated.

[theomjones]

I managed to fix this with the below main.js storybook config. As @hasparus says you can force storybook to use emotion 11. Everything seems chill from what I can see!

const path = require('path')

const resolve = (p) => path.join(process.cwd(), p)

module.exports = {
    webpackFinal(config) {
        config.resolve.alias = {
            ...config.resolve.alias,
            "@emotion/core": resolve("node_modules/@emotion/react"),
            "@emotion/styled": resolve("node_modules/@emotion/styled"),
            "emotion-theming": resolve("node_modules/@emotion/react"),

        };
        return config;
    },
    // .. rest of config
};

Such a sneaky issue

[hasparus]

@theomjones There are two Emotion contexts. Emotion 11 and Emotion 10. You need to either downgrade Theme UI to 0.3.5, enforce Emotion version with Yarn resolutions and webpack aliases in Storybook’s config or upgrade Storybook to a version that depends on Emotion 11 if it exists (PR here: https://github.com/storybookjs/storybook/pull/13300)