MUI MonthPicker 导致 Storybook 中出现 LocalizationProvider 错误

Question

我正在使用MUI MonthPicker（MUI v5.x），它在代码中工作正常，但是当我在故事书中使用该组件时，它给了我以下错误：

MUI：在上下文中找不到实用程序。看起来您忘记将组件包装在 LocalizationProvider 中，或直接传递 dateAdapter 属性。

我的组件简化代码是

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

我的故事代码是

...
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

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

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

export const Default: Story = {};

我尝试使用其他 dateAdaptor 得到相同的结果（AdapterDayjs、AdapterLuxon、AdapterMoment）。

请帮忙！

Answer 1

...我用 MUI 提出了它，但他们无法用最新版本重现它，所以它可能只是我使用的 MUI/Storybook 版本。

以防万一有人遇到同样的问题 - 我只是使用

StaticDatePicker

和

views

属性值

["month"]

和

["years"]

分别替换

MonthPicker

和

YearPicker

。它们看起来几乎一样，只是必须用

display: none

使月视图标题不可见。该组件没有任何问题。