Storybook MUI v5 文档未生成

Question

我正在使用带有故事书的 Material UI V5，除了文档不会自动生成之外，一切似乎都运行良好。当我单击“文档”选项卡时，它只是一个空白屏幕。

我查看了这个使用 Material Ui V4 的存储库，并且有文档正在研究我是否可以找出哪里/是否出错。但没有铁砧。故事书 MUI v4

我没有做任何花哨的事情，实际上我所做的只是使用sb命令行工具安装故事书，安装 Material UI v5 并导出一个按钮。但是没有文档显示。

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

在 Storybook 存储库上发布错误报告后，发现 Storybooks 版本的情感和 Material Ui v5 版本的情感存在冲突。

有一个解决方法可以让文档与 Mui5 一起使用，直到他们解决问题为止，即将以下代码添加到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",
  },
}