Storybook MUI v5 Documentation does not get generated

Question

I am using material UI V5 with story book, everything seems to work great other than docs will not auto generate. When i click on the "docs" tab it is just a blank white screen.

I have looked at this repository that uses Material Ui V4 and has docs working to see if i can work out where / if i'm going wrong. but no anvil. Storybook MUI v4

I haven't done anything fancy literally all i have done is installed story book using the sb command line tool, installed Material UI v5 and exported a button. However no docs show.

import React from "react";
import PropTypes from "prop-types";
import MiButton from "@mui/material/Button";

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  return <MiButton>GOT IM!</MiButton>;
};

Button.propTypes = {
  primary: PropTypes.bool,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: "medium",
  onClick: undefined,
};

Answer 1

After posting a bug report on the storybook repo it turns out there is a conflict with Storybooks version of emotion and Material Ui v5 version of emotion.

there is a work around for getting docs working with Mui5 untill they fix the issue which is adding the code below to preview.js

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  layout: "centered",
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: {
    inlineStories: false,
    iframeHeight: "700px",
  },
}