Emotion style appears partially on Storybook 7 with Nextjs

[frosty citrus]

Hi, I just installed Storybook 7 using NextJs. I was using NextJs with Emotion on Storybook 6 and it worked perfectly. But it seems that I have a configuration problem because my style appears partially, let me explain:

I started by adding the global style with withThemeFromJSXProvider

import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { Global } from '@emotion/react';
import globalShared from '../src/styles/globalShared';

const withGlobalStyle = () => (
    <Global
      styles={globalShared}
    />
);

export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles: withGlobalStyle,
  }),
];

and it only shows the style present in my globalShared file:

import { css } from '@emotion/react';

return css`
* {
    color: ${colors.error};
    font-family: sans-serif;
  }

   button {
     background-color: ${colors.success};
    }
`;
  // red and green are used for tests to show that this emotion style is present

I would like the emotion css of my components to be displayed

I have this error message in the console:

Invalid prop `theme` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.

Do you know why this message appears and how I can solve my problem to get my style as I had on Storybook 6?

*For images, the gray button is what I had, the green button is the problem

[pliant geyser]

@wanton rock

[wanton rock]

Hey @frosty citrus! You will need to also provide the ThemeProvider from emotion + your theme config

[frosty citrus]

Well, using a ThemeProvider removed the error in the console but it didn't allow the components to get the CSS emotion

Is it possible that it's because CSS props isn't included in Storybook 7?

[woeful skiff]

Is it possible that it's because CSS props isn't included in Storybook 7?
I don't understand this question. What do you mean?

[frosty citrus]

I mean, I feel like it's emotion's css props that aren't recognized

<Button
  // this props:
  css={rootStyle}
>
  Button
</Button>

Because my style given in globalShared is working so it's not a problem of Emotion not working

That's it 😄 That works ! Thank you for your help with the ThemeProvider 🙂

[woeful skiff]

Storybook doesn't do anything special that would cause that css prop to be support/not supported. What's required for that to work as expected?

I think some babel config is required for that to work?

[frosty citrus]

Yes, my babel configuration was not taken into account. I solved it by updating my config

[woeful skiff]

👍

[wanton rock]

Woohoo!