react-theming / storybook-addon-material-ui

Addon for storybook wich wrap material-ui components into MuiThemeProvider. :page_with_curl: This helps and simplifies development of material-ui based components.
https://github.com/sm-react/storybook-addon-material-ui
MIT License
567 stars 131 forks source link

Cannot read property 'prepareStyles' of undefined #78

Closed llmdev closed 6 years ago

llmdev commented 6 years ago

I made all the configuration that is here but it returns me this error

Cannot read property 'prepareStyles' of undefined

usulpro commented 6 years ago

Hi @llmdev ! Could you please give me a bit more information about this error? Does it happen on a specific story?

llmdev commented 6 years ago

Yes it happens in a specific story,

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import { muiTheme } from 'storybook-addon-material-ui';

import StepPanel from '@/components/StepPanel/StepPanel';
import { createMuiTheme } from '@material-ui/core/styles'; // v1.x
import { Kestraa } from '@/lib/palette';

const customTheme1 = createMuiTheme({
  palette: {
      primary: {
          light: '#c0c',
          main: '#c0c',
          dark: '#ccc',
          contrastText: '#fff',
      },
      secondary: {
          light: '#c0c',
          main: '#c0c',
          dark: '#c0c',
          contrastText: '#fff',
      },
  },
  themeName: 'Custom Light Theme',
});

storiesOf('StepPanel', module)
  .addDecorator(
    muiTheme([customTheme1]),
  )
  .add('Default', withInfo(`
    Step Panel default implementation.
  `)(
    () => (
      <StepPanel 
        step={1}
        stepName="Panel"
        onExpansionClick={action('on-expansion-click')}
        currentExpandedPanel="panel"
        panelName="panel"
        onNext={action('on-next')}
      >
        Content
      </StepPanel>
    ),
  ))
  .add('With Save', withInfo(`
    Step Panel with save button implementation.
  `)(
    () => (
      <StepPanel
        step={1}
        stepName="Panel"
        onExpansionClick={action('on-expansion-click')}
        currentExpandedPanel="panel"
        panelName="panel"
        onSave={action('on-save')}
        lastPanel
      >
        Content
      </StepPanel>
    ),
  ))
  .add('Not Expanded', withInfo(`
    Step Panel not expanded implementation.
  `)(
    () => (
      <StepPanel
        step={1}
        stepName="Panel"
        onExpansionClick={action('on-expansion-click')}
        currentExpandedPanel={null}
        panelName="panel"
        onNext={action('on-next')}
      >
        Content
      </StepPanel>
    ),
  ));
usulpro commented 6 years ago

could you clarify what version of storybook-addon-material-ui do you use?

llmdev commented 6 years ago

"storybook-addon-material-ui": "^0.9.0-alpha.8",

llmdev commented 6 years ago

Warning: Failed prop type: Invalid prop themesInitList of type array supplied to MuiTheme, expected function. in MuiTheme

llmdev commented 6 years ago

I solved the problem, I was not using version 1 of the material, thanks for the help

usulpro commented 6 years ago

happy to know it! good luck