@harelpls/storybook-addon-materialui

A simple storybook addon that provides a decorator to wrap your stories in the theme provider. storybook-addon-material-ui provided too many options for me and lacked the <CssBaseline /> injection.

Installation

0. Setup storybook
1. yarn add --dev @harelpls/storybook-addon-materialui
2. register the addon in main.js:

module.exports = {
  stories: [...],
  addons: ['@harelpls/storybook-addon-materialui']
}

3. add the decorator:

import React from 'react';

import { addDecorator } from '@storybook/react';
import { withMuiTheme } from "@harelpls/storybook-addon-materialui";

import {lightTheme, darkTheme} from './theme';
import MyComponent from './MyComponent';

// globally with custom themes
addDecorator(withMuiTheme({
  "Custom light theme": lightTheme,
  "Custom dark theme": darkTheme
}))

// via CFS with default themes
export default = {
  title: "My/Component",
  decorators: [withMuiTheme()]
}

// for individual story with default themes
export const MyStory = () => <MyComponent />;
MyStory.story = {
  decorators: [withMuiTheme()]
}

Options

The only options are the themes you wish to inject. The withMuiTheme decorator takes an object that describes your custom themes. The key is the name and label for the select element. The value is the theme itself.

withMuiTheme({
  'Select Option': myCustomTheme,
});

Parameters

Disable ThemeProvider wrapper for a single story

You can disable the wrapper (essentailly the whole addon) for particular stories by adding the disable parameter to materialui:

// CFS export
export default {
  title: 'Disable parameter',
  parameters: {
    materialui: {
      disable: true,
    },
  },
};

Disable <CssBaseline />

You may be using @storybook/addon-backgrounds and not want the background controlled by this addon. Simply pass the cssbaseline: false parameter to prevent the <CssBaseline /> component from being injected.

// CFS export
export default {
  title: 'Disable parameter',
  parameters: {
    materialui: {
      cssbaseline: false,
    },
  },
};