Nuclear Pumpkin Mayhem

    @harelpls/storybook-addon-materialui
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    @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.

    @harelpls/storybook-addon-materialui demo

    Installation

    1. Setup storybook
    2. yarn add --dev @harelpls/storybook-addon-materialui
    3. register the addon in main.js:
    module.exports = {
      stories: [...],
      addons: ['@harelpls/storybook-addon-materialui']
    }
    1. 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,
        },
      },
    };

    Keywords

    none

    Install

    npm i @harelpls/storybook-addon-materialui

    DownloadsWeekly Downloads

    2,764

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    52.2 kB

    Total Files

    29

    Last publish

    Collaborators

    • harelpls