如何调整MUI DesktopDatePicker日历组件的尺寸？

你之前尝试的.Mui-focusVisible是聚焦状态样式，和日历弹窗尺寸无关。要调整弹窗大小，需要针对弹窗及日历内部组件的类名配置样式，以下是两种可行方案：

方案一：精细调整弹窗及内部元素 #

通过限制弹窗宽度，同时调整日历单元格、字体等细节，适配更精准：

const StyledDesktopDatePicker = styled(DesktopDatePicker)(({ theme }) => ({
  // 限制日历弹窗最大宽度
  '& .MuiPickersPopper-content': {
    maxWidth: '280px',
  },
  // 调整日历组件内部样式
  '& .MuiCalendarPicker-root': {
    fontSize: '0.875rem',
    // 调整日期单元格尺寸与字体
    '& .MuiPickersDay-root': {
      width: '32px',
      height: '32px',
      fontSize: '0.875rem',
    },
    // 调整月份、年份标题字体大小
    '& .MuiTypography-root': {
      fontSize: '0.875rem',
    }
  }
}));

方案二：快速缩放整个弹窗 #

如果不需要精细调整，直接通过transform缩放弹窗，实现快速缩小：

const StyledDesktopDatePicker = styled(DesktopDatePicker)(({ theme }) => ({
  '& .MuiPickersPopper-content': {
    transform: 'scale(0.85)', // 缩放比例可自行修改
    transformOrigin: 'top left', // 固定缩放原点，避免弹窗位置偏移
  },
}));

使用方式 #

将你代码中的<DesktopDatePicker>替换为<StyledDesktopDatePicker>即可，原有的renderInput等配置无需改动。

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