CODEWITHSUNDEEP
reactjsstyled-componentsstorybook
karolis2017
karolis2017

Reputation: 2415

How do I pass my components theme through storybook?

I need to pass a theme that is used in components but I get a syntax error.

My .storybook/config.js:

import { configure, addDecorator } from '@storybook/react'
import React from 'react'

import theme from '../src/theme'
import { ThemeProvider } from 'styled-components'
import '../src/styles/index.css'

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

function loadStories() {
  const req = require.context('../src', true, /\.stories.js$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

Here's the full error:

enter image description here

Upvotes: 0

Views: 1689

Answers (2)

Nathan Scott
Nathan Scott

Reputation: 11

Have you tried making the theme provider as a separate file without using the decorators? The below is a Styled-components and typescript implementation.

import React from 'react';  

export const Container = ({ title, children }) => {
   return (
    <StoryWrapper>
      <GlobalStyle theme={themes.default} />

        <ThemeProvider theme={themes.default}>
          <MainWrapper>
            <Header>{title}</Header>
            {children}
          </MainWrapper>
        </ThemeProvider>

    </StoryWrapper>
  );
};

I never used the add decorator feature and this was the config implementation I used, it is set up for tsx though.

import { addParameters, configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

const req = require.context('../src', true, /.stories.tsx$/);
function loadStories(){
    req.keys().forEach(req);
}

addDecorator(withKnobs);

configure(loadStories, module);

Upvotes: 1

Raicuparta
Raicuparta

Reputation: 2115

Seems like Babel is confused that you're using JSX in a JS file.

Try renaming config.js to config.jsx. The file extension should instruct babel to treat it as a JSX file.

Upvotes: 0

Related Questions