MUI X Calendar在浏览器设备切换栏模拟安卓重载页面时崩溃问题

问题根因 #

该问题是MUI Lab日期选择器在安卓模拟环境下的常见适配问题，核心触发原因有两个：

1. AdapterDateFns未明确指定本地化配置，安卓设备（含模拟环境）对默认系统时区/语言的解析逻辑与iOS不同，加载时解析日期参数失败触发崩溃
2. 外层容器固定写死height: 100%，安卓模拟下移动端视图的日期选择器默认会触发原生组件 fallback，容器高度计算异常导致布局崩溃

修复步骤 #

1. 补充date-fns本地化配置 #

导入对应语言的locale包，明确传给LocalizationProvider，同时添加参数禁用原生选择器 fallback：

// 顶部导入中文本地化包
import zhCN from 'date-fns/locale/zh-CN';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';

// 组件使用时指定locale
<LocalizationProvider dateAdapter={AdapterDateFns} locale={zhCN}>
    <CalendarPicker
        minDate={new Date()}
        date={date}
        onChange={(newDate) => setDate(newDate)}
        // 禁用移动端原生选择器 fallback，强制使用网页版日历视图
        disableMobileKeyboardInput
        showToolbar={false}
    />       
</LocalizationProvider>

2. 调整外层容器高度适配 #

把Accordion内部包裹日历的Box的固定高度改成最小高度，避免移动端高度溢出：

<Box
    sx={{
        width: "100%",
        // 把固定100%高度改成最小高度，适配日历内容高度
        minHeight: "360px",
        backgroundColor: "#FFFFFF",
        borderRadius: "6px",
    }}
>
    <ResponsiveDatePicker />
</Box>

3. 补充date状态初始化校验 #

避免初始化时date为undefined导致日期解析失败：

const [date, setDate] = useState(() => new Date());

修复后重新在安卓模拟环境重载页面即可正常渲染。

内容的提问来源于stack exchange，提问作者Mallikarjun M G