Override storybook add to make it work with material UI

muiStoriesOf.js

import React from 'react';
import { storiesOf as storybookStoriesOf } from '@storybook/react';
import { StylesProvider } from '@material-ui/styles';

const generateClassName = (rule, styleSheet) => `${styleSheet.options.classNamePrefix}-${rule.key}`;

// Putting material-ui to work with jest snapshot is having a style name issue as described here https://github.com/mui-org/material-ui/issues/9492
// This small gist override the storiesOf default from @storybook/react with wrapper for StylesProvide
// Later when the original storiesOf works, we can just replace this with the original version

export default function storiesOf(kind, module) {
  let stories = storybookStoriesOf(kind, module)
  let _add = stories.add
  //add: (storyName: string, storyFn: StoryFn<StoryFnReturnType>, parameters?: Parameters) => StoryApi<StoryFnReturnType>;
  stories.add = (storyName, storyFn, parameters) =>
    _add(storyName, () => (
      <StylesProvider generateClassName={generateClassName}>
        {storyFn()}
      </StylesProvider>
    ), parameters)

  return stories
}