New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,457
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@harelpls/storybook-addon-materialui
A simple decorator to wrap your stories in a @mui-org material-ui theme
npm install @harelpls/storybook-addon-materialui
Last updated over 3 years ago
3.8k
Downloads per week
Readme View on GitHub

@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,
    },
  },
};
Join the community
6,319 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI