CODEWITHSUNDEEP
next.jsstyled-componentsnext.js13storybook
jm2920
jm2920

Reputation: 11

ThemeProvider from Styled-components not working in storybook (Next.js 13)

I'm currently working on a Next.js website and using styled-components along with Storybook. While I've configured everything to work well with Storybook, I've encountered an issue with the ThemeProvider.

Previously, everything was functioning correctly, but after migrating the project from Create React App (CRA) to Next.js 13, it seems like the ThemeProvider isn't cooperating as expected.

can you guys please help me with this?

this is .storybook/main.ts.

import * as path from 'path';
import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {
      image: {
        loading: 'eager',
      },
      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
    },
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
};
export default config;

and this is .storybook/preview.ts.

import type { Preview } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { theme } from '../styles/theme';
import { GlobalStyles } from '../styles/GlobalStyles';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    nextjs: {
      appDirectory: true,
    },
  },
};

export default preview;

export const decorators = [
  withThemeFromJSXProvider({
    themes: { theme },
    Provider: ThemeProvider,
    GlobalStyles,
  }),
];

I've tried everything..

Upvotes: 0

Views: 590

Answers (2)

Eirene Fireman
Eirene Fireman

Reputation: 1

worked for me: https://github.com/morewings/storybook-addon-theme-provider

preview.ts:

 decorators: [
    withThemeProvider(Provider),
    ///...
  ],

Provider.tsx:

export const Provider = <TTheme,>({
  children,
  theme,
}: {
  children?: ReactNode
  theme?: TTheme
}) => {
  return (
    <ThemeProvider theme={theme as DefaultTheme}>
      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

Upvotes: 0

Odiri Teddie
Odiri Teddie

Reputation: 310


import type { Preview } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { theme } from '../styles/theme';
import { GlobalStyles } from '../styles/GlobalStyles';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';

const preview: Preview = {
  decorators: [
    (Story) => (
      <ThemeProvider theme={theme}>
        <GlobalStyles theme={theme} />
            <Story />
      </ThemeProvider>
    ),
  ],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    nextjs: {
      appDirectory: true,
    },
  },
};

export default preview;

Upvotes: 0

Related Questions