升级至Material-UI v5后Storybook的Docs标签页无内容显示该如何解决？

• 第一步：统一依赖版本，卸载不兼容插件
  确保所有Storybook相关依赖（@storybook/react、@storybook/addon-docs、@storybook/addon-essentials等）版本≥6.4，且所有依赖版本号完全一致。卸载MUI v4配套的storybook-addon-material-ui等旧版适配插件，该类插件不支持MUI v5。
• 第二步：调整Storybook核心配置（.storybook/main.js）
  启用webpack5构建和storyStoreV7特性，避免和MUI v5的依赖冲突，配置参考：

  module.exports = {
    stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
    addons: [
      "@storybook/addon-links",
      "@storybook/addon-essentials",
      {
        name: "@storybook/addon-docs",
        options: {
          sourceLoaderOptions: {
            injectStoryParameters: false,
          },
        },
      },
    ],
    features: {
      storyStoreV7: true,
    },
    framework: "@storybook/react",
    core: {
      builder: "webpack5",
    },
  };
  

• 第三步：在预览配置中注入MUI主题（.storybook/preview.js）
  避免MUI主题缺失导致的渲染异常，配置参考：

  import { ThemeProvider, createTheme } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  
  const theme = createTheme();
  
  export const parameters = {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  }
  
  export const decorators = [
    (Story) => (
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Story />
      </ThemeProvider>
    ),
  ];
  

• 第四步：修改Story文件为CSF3规范写法
  旧版Story写法无法被新版addon-docs识别，会导致文档生成失败，修改你的Button Story文件参考如下：

  import { Button } from "../component/Button";
  
  export default {
    title: "Utilities/Button",
    component: Button,
    tags: ['autodocs'],
    argTypes: {
      color: { control: 'color' },
      width: { control: 'text' },
      variant: { control: 'select', options: ['contained', 'outlined', 'text'] }
    }
  };
  
  export const Primary = {
    args: {
      color: "primary",
      variant: "contained",
      children: "Primary"
    }
  };
  
  export const Secondary = {
    args: {
      color: "secondary",
      variant: "contained",
      children: "Secondary"
    }
  };
  
  export const FullWidth = {
    args: {
      variant: "contained",
      color: "primary",
      width: "100%",
      children: "Primary"
    }
  };
  

• 第五步：清除缓存重启服务
  执行启动命令时添加--no-cache参数清除历史缓存，避免缓存导致的渲染异常，示例命令：storybook dev --no-cache（旧版Storybook对应命令为start-storybook --no-cache）。

内容的提问来源于stack exchange，提问作者Vikas Kumar