Material UI响应式Date Picker咨询：desktopModeMediaQuery用法及其他方案

一、desktopModeMediaQuery 属性用法 #

desktopModeMediaQuery 是Material UI X Date Picker用来切换桌面/移动端模式的核心属性，它接收一个CSS媒体查询字符串，当屏幕匹配该查询时，组件渲染桌面版日历，否则切换为移动端适配的样式（比如底部弹窗式日历）。

示例代码：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';

export default function ResponsiveDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="选择日期"
        renderInput={(params) => <TextField {...params} fullWidth />}
        // 屏幕宽度≥768px时用桌面模式，否则切换为移动端模式
        desktopModeMediaQuery="(min-width: 768px)"
      />
    </LocalizationProvider>
  );
}

该属性主要负责模式切换，移动端模式本身会自适应屏幕宽度；若需调整桌面版日历的宽度，可配合下方方案实现。

二、日历宽度自适应的其他方案 #

如果需要更精细控制日历容器的宽度（比如让桌面版日历随屏幕宽度缩放），可参考以下几种方式：

1. 用SX属性结合响应式断点 #

利用Material UI主题断点，给日历弹出层（Popper）设置响应式宽度：

<DatePicker
  label="自适应宽度日历"
  renderInput={(params) => <TextField {...params} fullWidth />}
  slots={{
    popper: ({ children, ...props }) => (
      <Box
        sx={{
          width: { xs: '90vw', sm: '80vw', md: '400px' }, // 不同断点下的宽度配置
          maxWidth: '100%'
        }}
      >
        {children}
      </Box>
    )
  }}
/>

通过重写popper插槽，用Box组件包裹日历，借助主题断点（xs、sm、md）实现不同屏幕尺寸下的宽度自适应。

2. 自定义CSS类控制日历容器 #

通过全局CSS或styled-components，针对日历根容器类MuiPickersCalendar-root设置响应式样式：

/* 全局样式示例 */
@media (max-width: 600px) {
  .MuiPickersCalendar-root {
    width: 100% !important;
    min-width: unset;
  }
}

@media (min-width: 601px) {
  .MuiPickersCalendar-root {
    width: 350px;
  }
}

也可在组件内用sx属性直接覆盖样式：

<DatePicker
  label="自定义宽度日历"
  renderInput={(params) => <TextField {...params} />}
  sx={{
    '& .MuiPickersCalendar-root': {
      width: { xs: '100%', md: '350px' }
    }
  }}
/>

3. 让输入框与日历宽度联动 #

将输入框设为fullWidth，同时让日历弹出层继承输入框宽度，适合需要日历与输入框同宽的场景：

<DatePicker
  label="与输入框同宽"
  renderInput={(params) => <TextField {...params} fullWidth />}
  slotProps={{
    popper: {
      sx: {
        width: '100%',
        '& .MuiPickersCalendar-root': {
          width: '100%'
        }
      }
    }
  }}
/>

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