New
Storybook for full-stack developersAutomate with Chromatic
Star75,240
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Integrate Material UI and Storybook
Material UI is a component library based on Google's Material Design spec. This recipe shows you how to get the most out of Material UI in Storybook.

Do it for me automatically

The quickest way to integrate Storybook and Material UI is to use an addon. Addons are reusable packages that automatically configure integrations. Check out the Material UI addons below. If you’re looking to integrate Material UI manually, jump to the recipe.

React Theming
Develop themes and themable components with Emotion, Styled Components, Material-UI and your custom solution
32.2k
Downloads
Material-UI
Storybook Addon for Material UI Library
29.3k
Downloads

How to setup Material UI and Storybook

This recipe assumes that you already have a React app using the @mui/material package set up with Storybook 6.0 or newer. If you don’t have a project ready, clone my example repository to follow along.

Bundle fonts and icons for better perf

Material UI depends on two fonts to render as intended, Google’s Roboto and Material Icons. While you can load these fonts directly from the Google Fonts CDN, bundling fonts with Storybook is better for performance.

  • 🏎️ Fonts load faster because they are coming from the same place as your app
  • ✈️ Font will load offline so you can continue developing your stories anywhere
  • 📸 No more inconsistent snapshot tests because fonts load instantly

To get started, install the fonts as dependencies.

Then import the CSS files into .storybook/preview.js, the entrypoint of your storybook.

Load custom themes and add a theme switcher

Material UI comes with a default theme out of the box, but you can also create and provide your own themes. Given the popularity of dark mode, you'll likely end with more than one custom theme. Let's look at how you can load custom themes and switch between them with just a click.

Storybook changing to the provided dark theme

For example, take this custom dark mode theme.

To apply the custom theme to our stories, we’ll need to wrap them in Material UI’s ThemeProvider using a decorator.

Awesome! Now when Storybook is reloaded, you'll see that our withMuiTheme decorator is providing our custom dark theme.

Use globalTypes to add a theme switcher

To take this decorator a step further, let’s add a way to toggle between multiple themes.

Switching between light and dark mode using a theme switcher in the Storybook toolbar

To do this, we can declare a global variable named theme in .storybook/preview.js and give it a list of supported themes to choose from.

Now we can update our decorator to provide the theme selected in our new dropdown.

Now we have a fully functioning theme switcher for our MaterialUI Storybook. If you want to learn more about switchers, check out Yann Braga’s article on adding a theme switcher.

Use Material UI prop types for better controls and docs

Storybook controls give you graphical controls to manipulate a component’s props. They’re handy for finding edge cases of a component and prototyping in the browser.

Usually, you have to manually configure controls. But if you’re using Typescript, you can reuse Material UI’s component prop types to auto generate story controls. As a bonus, this will also automatically populate the prop table in your documentation tab.

Changing the button components props using Storybook controls

Let’s take the following Button component for example.

Here I’m using the label prop as the MuiButton’s child and passing all other props through. However, when we render this into Storybook, our controls panel only lets us change the label prop that we declared ourselves.

The button story with only a label prop control

This is because Storybook only adds props to the controls table that are explicitly declared in the component’s prop types or in the Story Args. Let’s update Storybook’s Docgen configuration to bring Material UI‘s Button props into the controls table as well.

We also want to update the parameters in .storybook/preview.js to show the description and default columns for the controls table.

Lastly, update the ButtonProps type to extend from Material UI’s Button props to add all of these props to the controls.

Restart your Storybook server so that these config changes take effect. You should now see that Button has controls for all of MuiButton's props as well.

The button story with all 27 prop controls from the MUI button props

Choose which controls are visible

Our button now has 27 props, which is perhaps a little much for your use case. To control which props are visible we can use TypeScript’s Pick<type, keys> and Omit<type, keys> utilities.

And now our Button will only take the variant, size, and color props from MuiButton.

The button story with only the controls specified

📣 Shout out to Eric Mudrak’s awesome Storybook with React & TypeScript article that inspired this tip.

Join the community
5,866 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI