如何在ReactJS中调整MUI DateCalendar的尺寸

我用这段代码展示MUI的DateCalendar：

<LocalizationProvider dateAdapter={AdapterDayjs}>
   <DateCalendar/>
</LocalizationProvider>

想要增大日历的尺寸，尝试通过sx属性调整日期单元格的大小：

<LocalizationProvider dateAdapter={AdapterDayjs}>
       <DateCalendar
         sx={{
           "& .MuiPickersDay-root": {
             height: "100px",
             minWidth: "100px",
           },
        }}
       />
</LocalizationProvider>

但设置后日历无法正常显示。

问题原因 #

单独修改MuiPickersDay-root的尺寸会破坏日历的网格布局逻辑——日历容器、星期标签、表头元素的尺寸没有同步调整，导致单元格溢出或布局错乱。

解决方案 #

方案1：整体缩放（简单高效）

用CSS transform: scale() 整体放大日历，不会破坏原有布局：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateCalendar
    sx={{
      transform: 'scale(1.5)',
      transformOrigin: 'top left' // 控制缩放原点，避免日历偏移
    }}
  />
</LocalizationProvider>

方案2：精细化调整各组件样式

如果需要自定义不同元素的尺寸比例，可以同步调整日历内多个关键组件的样式：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateCalendar
    sx={{
      // 调整容器内边距，防止内容溢出
      padding: 2,
      // 调整日期单元格
      '& .MuiPickersDay-root': {
        height: '50px',
        minWidth: '50px',
        fontSize: '1.2rem' // 同步放大日期文字
      },
      // 调整星期标签
      '& .MuiPickersCalendar-weekDayLabel': {
        fontSize: '1rem',
        padding: '8px 0'
      },
      // 调整表头导航与标题
      '& .MuiPickersToolbar-root': {
        fontSize: '1.5rem',
        padding: '12px 0'
      },
      '& .MuiIconButton-root': {
        fontSize: '1.5rem'
      }
    }}
  />
</LocalizationProvider>

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