MUI v7开启showDaysOutsideCurrentMonth后点击跨月日期仍切换视图

问题原因 #

MUI v7 中，StaticDatePicker 默认会在点击当前月份外的日期时自动切换视图到对应月份。你的代码里组件的 value 绑定了 currentMonth，视图切换会触发 onMonthChange 更新 currentMonth，进而导致组件重新渲染，选中的跨月日期状态被刷新。虽然 onDateChange 能接收到正确的日期，但视图切换引发的重绘会让选中状态丢失。

解决方案 #

1. 阻止外部日期点击的视图切换行为 #

在自定义的 day 插槽组件中，通过阻止事件冒泡，避免触发 StaticDatePicker 默认的视图切换逻辑：

const renderWeekPickersDay = (pickersDayProps: PickersDayProps<Date>) => {
  const handleDayClick = (event: React.MouseEvent) => {
    // 阻止事件冒泡，避免触发StaticDatePicker的视图切换
    event.stopPropagation();
    // 执行原有的点击回调（如果有）
    pickersDayProps.onClick?.(event);
    // 执行自定义的日期选中逻辑
    onDateChange(pickersDayProps.day);
  };

  return (
    <DayPicker
      key={pickersDayProps.key}
      date={pickersDayProps.day}
      selectedDates={selectedDates}
      hoveredDates={hoveredDates}
      onWeekPickerClick={onWeekPickerClick}
      onWeekHovered={onWeekHovered}
      pickersDayProps={{
        ...pickersDayProps,
        onClick: handleDayClick
      }}
      firstDayOfWeekStyles={{ marginLeft: "92px" }}
      onDateChange={onDateChange}
    />
  );
};

2. 锁定视图切换的触发条件 #

确保 currentMonth 仅在手动点击左右箭头切换月份时更新，而非点击外部日期时：

const onMonthChange = (newMonth: Date) => {
  // 仅在手动点击箭头切换月份时更新currentMonth
  setCurrentMonth(newMonth);
};

3. 调整 StaticDatePicker 属性 #

优化 value 绑定逻辑，避免视图切换时触发不必要的重渲染。如果业务允许，可将 value 设置为选中日期集合中的第一个，或保持固定值：

<StaticDatePicker
  displayStaticWrapperAs="desktop"
  disableHighlightToday={false}
  maxDate={TODAY}
  autoFocus
  // 若不需要value与当前月份绑定，可改为选中的第一个日期或其他固定值
  value={selectedDates[0] || currentMonth}
  onChange={onDateChange}
  onMonthChange={onMonthChange}
  showDaysOutsideCurrentMonth
  minDate={START_DATE}
  slots={{
    leftArrowIcon: LeftArrowIcon,
    rightArrowIcon: RightArrowIcon,
    switchViewButton: () => null,
    day: renderWeekPickersDay,
  }}
/>

关键说明 #

• 阻止事件冒泡是核心：通过拦截自定义Day组件的点击事件，不让StaticDatePicker感知到外部日期的点击，从而避免自动切换视图。
• 状态隔离：确保currentMonth的更新仅由手动切换月份触发，避免与日期选中逻辑冲突。

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