Storybook搭配Mui V5报错theme.shape未定义，Canvas主题色不生效问题

1. 修复 theme.shape is undefined 报错 #

• 首先确认项目中使用的Material UI版本和storybook-addon-material-ui版本兼容：如果使用MUI v5，请安装适配v5的@storybook/addon-material-ui最新版本，v4版本的addon无法正确识别v5的主题结构。
• 确认自定义主题是通过MUI官方提供的createTheme方法生成的，不要直接传入普通配置对象，createTheme会自动补全默认主题字段，避免字段缺失报错：

import { createTheme } from '@mui/material/styles';

const customTheme = createTheme({
  shape: {
    borderRadius: 2,
  },
  // 其余自定义主题配置
});

• 检查是否存在多版本MUI依赖冲突，执行npm ls @mui/material或者yarn list @mui/material确认只有一个版本的MUI被安装。

2. 修复Canvas区域主题色不生效问题 #

该问题核心原因是Storybook的Canvas沙箱内的组件没有正确接收到addon注入的主题配置，按以下步骤排查：

• 调整.storybook/preview.js中的装饰器顺序，确保MUI主题相关的装饰器处于最外层，所有组件都能被ThemeProvider包裹，参考配置：

import { ThemeProvider, CssBaseline } from '@mui/material';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import yourCustomThemes from './themes';

export const decorators = [
  withThemeFromJSXProvider({
    themes: yourCustomThemes,
    defaultTheme: 'light',
    Provider: ThemeProvider,
    GlobalStyles: CssBaseline,
  }),
];

• 如果你使用旧版storybook-addon-material-ui，需要确认没有手动在组件层面写死ThemeProvider覆盖addon的注入配置，同时在addon配置中开启主题自动注入功能。
• 如果你使用MUI v5，需要在ThemeProvider外层增加StyledEngineProvider避免样式注入优先级冲突：

import { StyledEngineProvider } from '@mui/material/styles';

export const decorators = [
  (Story) => (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={yourTheme}>
        <CssBaseline />
        <Story />
      </ThemeProvider>
    </StyledEngineProvider>
  )
];

内容的提问来源于stack exchange，提问作者Vidura Adikari