MUI MonthPicker在Storybook中触发LocalizationProvider错误求助

核心问题排查与修复步骤 #

1. 修正组件导入路径
   确保你的MyMonthPicker中使用的MonthPicker是从@mui/x-date-pickers/MonthPicker正确导入的，错误的导入路径会导致组件无法读取LocalizationProvider提供的上下文。

2. 修正Storybook Meta中的组件引用
   你的Storybook配置里Meta的component字段错误引用了MonthYearPicker，但实际要展示的组件是MyMonthPicker，这会导致装饰器的LocalizationProvider没有正确包裹目标组件。

3. 检查dateAdapter依赖
   使用对应日期适配器时，必须安装其依赖包：

• 若用AdapterDateFns：安装date-fns
• 若用AdapterDayjs：安装dayjs
• 若用AdapterLuxon：安装luxon
• 若用AdapterMoment：安装moment

修正后的代码示例 #

MyMonthPicker组件代码

import { Paper } from '@mui/material';
import { MonthPicker } from '@mui/x-date-pickers/MonthPicker';

export const MyMonthPicker = ({ value, onChange }) => (
    <Paper>
      <MonthPicker
        onChange={(newDate) => onChange(newDate)}
        date={value}
        disableFuture
      />
    </Paper>
);

Storybook配置代码

import { Meta, StoryObj } from '@storybook/react';
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { Box } from '@mui/material';
import { MyMonthPicker } from './MyMonthPicker';

const meta: Meta<typeof MyMonthPicker> = {
  title: "MyProject/components/MyMonthPicker",
  component: MyMonthPicker,
  args: { value: new Date(), onChange: (value) => console.log(value) },
  decorators: [
    (Story) => (
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Box sx={{ position: "relative", padding: 2 }}>
          <Story />
        </Box>
      </LocalizationProvider>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof MyMonthPicker>;

export const Default: Story = {};

额外说明 #

业务代码中正常是因为它已经被正确的LocalizationProvider包裹，而Storybook作为独立的组件展示环境，需要单独为组件配置上下文包裹。修正上述两点后，组件应该能在Storybook中正常渲染。

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