Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
A simple decorator to wrap your stories in a @mui-org material-ui theme
npm install @harelpls/storybook-addon-materialui
Last updated almost 4 years ago
Downloads per week
Readme View on GitHub


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


  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
  "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()]


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.

  'Select Option': myCustomTheme,


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,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI