addon question: theming in preview

Hi there,

Is there a way to render components such as Button from import {Button} from l'@storybook/components' inside of the preview? Right now I get errors like this:

Button.js:61 Uncaught TypeError: Cannot read property 'size' of undefined
    at push../node_modules/@storybook/components/dist/Button/Button.js.ButtonWrapper.withComponent.target (Button.js:61)

Minimum use case:

import React from 'react';
import { Button } from '@storybook/components';

export default {
  title: 'Button',
};

export const button = () => <Button>Test</Button>;

The issue is that the theme is not being populated. Is there a component I should be wrapping the Button inside of for the preview to have the theme populated?

[alexreardon]

I ended up with this for anyone who needs it:

import { convert, createGlobal, Global, Theme, ThemeProvider, themes } from '@storybook/theming';
import React from 'react';

export default function WithStorybookTheme({
  children,
  mode = 'normal',
}: {
  children: React.ReactNode;
  mode?: 'normal' | 'dark';
}) {
  const theme: Theme = convert(mode === 'dark' ? themes.dark : themes.normal);

  return (
    <>
      <ThemeProvider theme={theme}>
        <Global styles={createGlobal(theme)} />
        {children}
      </ThemeProvider>
    </>
  );
}

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!