MUI（Material UI）组件的故事书道具不显示

Question

所以我试图在 Storybook 上与文档一起显示MUI组件（我没有扩展它们或任何东西）。我无法自动显示和检测道具。

以下是使用 MUI 按钮的示例：

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import  Button  from  '@mui/material/Button';;

export default {
  title: 'Button',
  component: Button,
} as ComponentMeta<typeof Button>;


const Template: ComponentStory<typeof Button> = (args) => <Button {...args} >Button</Button>;

export const Primary = Template.bind({});
Primary.args = {
};

在这种情况下，按钮被显示，但控制面板是空的（不显示任何道具）。如果我将 Button 组件替换为普通 HTML 按钮的包装器，如下所示：

import React, { Component } from 'react';

class Button extends Component<React.HTMLAttributes<HTMLButtonElement>, {}> {
    public render() {
        return (<button></button>); 
    }
}

export default Button;

这样，所有的道具就都显示出来了。我什至修改了propFiltermain.js 中的函数以显示所有道具：

//main.js 
module.exports = {
  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    '@storybook/addon-controls'],
  "framework": "@storybook/react",
  core: {
    builder: "webpack5"
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {
        return true
      },
    },
  }
};

这是我的依赖项：

{
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-typescript": "^7.17.12",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-docs": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "babel-loader": "^8.2.5",
    "fork-ts-checker-webpack-plugin": "^7.2.11",
    "jest": "^28.1.1",
    "ts-node": "^10.8.1",
    "typescript": "^4.7.3",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "publishConfig": {
    "registry": "http://artifacts.cloud.bamfunds.net/repository/bam-npm/"
  },
  "peerDependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/material": "^5.8.4",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0"
  },
}