在Storybook中使用Material UI组件时主题切换无效、Docs页报错咨询

你遇到的问题不是Material UI v5的bug，核心原因是你使用的storybook-addon-material-ui插件仅适配Material UI v4，与v5版本完全不兼容。

解决步骤 #

• 第一步：卸载不兼容的旧插件
  执行命令：

  npm uninstall storybook-addon-material-ui
  # 若使用yarn则执行
  # yarn remove storybook-addon-material-ui
  

• 第二步：调整.storybook/preview.js配置，直接使用MUI v5官方的ThemeProvider包裹组件，无需第三方插件即可实现主题接入，参考配置如下：

  import { ThemeProvider, createTheme } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  
  // 可自定义主题配置，替换为你项目的实际主题即可
  const customTheme = createTheme({
    palette: {
      mode: 'light',
      // 其他自定义主题字段
    }
  });
  
  export const parameters = {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  }
  
  export const decorators = [
    (Story) => (
      <ThemeProvider theme={customTheme}>
        <CssBaseline />
        <Story />
      </ThemeProvider>
    )
  ];
  

额外说明 #

如果需要在Storybook中实现多主题切换功能，可直接利用Storybook自带的controls能力实现，无需依赖第三方插件：

1. 在parameters中新增主题控制参数
2. 在decorator中根据当前选中的参数动态生成对应的主题实例即可。

你遇到的Docs页报错，是因为旧插件传递给MUI v5的主题对象结构不符合v5规范，MUI v5的Button组件需要读取theme.shape.borderRadius属性，而旧插件生成的主题没有对应结构导致读取失败，替换为官方ThemeProvider配置后即可解决。

内容的提问来源于stack exchange，提问作者Ugo Lfe