如何修改MUI DatePicker v5的日历弹窗宽度？解决主题覆盖时的TypeScript错误

我刚踩过类似的坑，给你分享两个实用的解决方向：

一、先解决TypeScript错误：MuiDatePicker无法分配给Components类型 #

你遇到这个问题是因为MUI X的DatePicker是复合组件，它并不在Material UI默认的Components类型定义里。直接用MuiDatePicker去扩展主题肯定会报错，正确的做法是针对它内部的核心组件（比如日历容器MuiCalendarPicker、弹窗容器MuiPickersPopper）来扩展类型：

1. 在项目根目录创建/修改类型定义文件（比如src/types/mui.d.ts），添加以下代码：

import { CalendarPickerProps } from '@mui/x-date-pickers/CalendarPicker';
import { PickersPopperProps } from '@mui/x-date-pickers/PickersPopper';
import { Theme } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Components {
    // 扩展日历组件类型
    MuiCalendarPicker?: {
      defaultProps?: Partial<CalendarPickerProps>;
      styleOverrides?: {
        root?: React.CSSProperties;
      };
    };
    // 扩展弹窗容器类型（可选，如果你要改弹窗外层宽度）
    MuiPickersPopper?: {
      defaultProps?: Partial<PickersPopperProps>;
      styleOverrides?: {
        popper?: React.CSSProperties;
      };
    };
  }
}

2. 重启你的TypeScript服务（比如tsc --watch或者开发服务器），错误就会消失了。

二、修改日历弹窗宽度的两种有效方法 #

方法1：局部修改（单组件生效，推荐快速调试） #

直接通过slotProps配置DatePicker内部的弹窗和日历组件样式，不需要改主题：

<DatePicker
  renderInput={(params) => <TextField {...params} sx={{ ...formStyles }} />}
  slotProps={{
    // 配置弹窗容器的宽度
    popper: {
      sx: {
        width: '100%',
        maxWidth: 450, // 限制弹窗最大宽度
      },
    },
    // 配置日历本身的宽度
    calendar: {
      sx: {
        width: 400,
        '& .MuiDayCalendar-weekContainer': {
          // 可选：调整日期格子的宽度，避免变形
          justifyContent: 'space-around',
        },
      },
    },
  }}
/>

方法2：全局修改（所有DatePicker生效） #

如果需要项目中所有DatePicker都用统一的弹窗宽度，就通过修改主题实现：

const theme = createTheme({
  components: {
    MuiCalendarPicker: {
      styleOverrides: {
        root: {
          width: 400, // 设置日历核心容器宽度
        },
      },
    },
    MuiPickersPopper: {
      styleOverrides: {
        popper: {
          width: '100%',
          maxWidth: 450, // 设置弹窗外层容器的最大宽度
        },
      },
    },
  },
});

记得把这个主题通过ThemeProvider包裹你的应用根组件。

小提示 #

如果修改宽度后日期格子变形，可以调整MuiDayCalendar-weekContainer的样式，比如增加gap或者调整justifyContent，保证布局美观。

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