Using with EmotionJS

[usulpro]

@UsulPro sorry to pester but this seems like a real issue and being that I can't reproduce it in the actual repo I am not sure how to assist or proceed.

I have created a separate repo that demonstrates the issue. This example repo was create with create-react-app and sb init. I then added a button example using the same code as used in the addons demo code.

https://github.com/dptoot/react-theming-storybook-addon-test

npm run storybook will show the error occurring with [email protected] when the button story is selected

RangeError
Maximum call stack size exceeded

Pinning the all storybook dependencies to v6.3.12 will show the addon to work as expected.

Hopefully this is helpful

Originally posted by @dptoot in https://github.com/react-theming/storybook-addon/issues/39#issuecomment-1007562535

[usulpro]

For some reasons styled components wrapped into the ThemeProvider doesn't have access to a theme object while useTheme hook still works fine

import styled from '@emotion/styled';
import { jsx, ThemeProvider, useTheme } from '@emotion/react'
import React from 'react';

const Container = styled.div`
  background-color: ${({theme}) => console.log('theme is empty', theme) || theme.colorA};
  color: ${({ theme }) => theme.colorB};
  padding: 16px;
`;

const Panel = ({ amount = 0 }) => {
  const theme = useTheme();
  console.log("theme works fine", theme)
  return <Container>Panel {`amount=${amount}`}</Container>;
};

export default Panel;

This reproduced even without react-theming. using

export const decorators =[
  (Story) => (
    <ThemeProvider theme={theme2}>
      <Story />
    </ThemeProvider>
  ),
]

gives the same result

[rockse]

I can confirm we are facing the same issue

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[cherylcarpenter]

Please reopen . There is no path forward using emotion, react, and typescript

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.