如何为移动端自定义MUI DesktopDateTimePicker组件尺寸？

方案一：改用官方移动端专用组件 #

MUI提供了MobileDateTimePicker，专门针对移动端触摸交互和小屏幕布局优化，这是最直接省心的解决方案。

基础使用示例 #

import { useState } from 'react';
import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export default function ResponsiveDateTimePicker() {
  const [selectedDateTime, setSelectedDateTime] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <MobileDateTimePicker
        label="选择日期时间"
        value={selectedDateTime}
        onChange={(newValue) => setSelectedDateTime(newValue)}
      />
    </LocalizationProvider>
  );
}

响应式自动切换组件 #

如果需要根据屏幕尺寸自动在桌面/移动端组件间切换，可配合MUI的useMediaQuery和useTheme实现：

import { useState } from 'react';
import { DesktopDateTimePicker, MobileDateTimePicker } from '@mui/x-date-pickers';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

export default function ResponsiveDateTimePicker() {
  const [selectedDateTime, setSelectedDateTime] = useState(null);
  const theme = useTheme();
  const isMobileScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      {isMobileScreen ? (
        <MobileDateTimePicker
          label="选择日期时间"
          value={selectedDateTime}
          onChange={setSelectedDateTime}
        />
      ) : (
        <DesktopDateTimePicker
          label="选择日期时间"
          value={selectedDateTime}
          onChange={setSelectedDateTime}
        />
      )}
    </LocalizationProvider>
  );
}

方案二：自定义DesktopDateTimePicker适配移动端 #

如果必须使用DesktopDateTimePicker，可以通过MUI的样式覆盖能力调整布局和尺寸：

直接通过sx属性调整样式 #

<DesktopDateTimePicker
  label="选择日期时间"
  value={selectedDateTime}
  onChange={setSelectedDateTime}
  sx={{
    // 调整弹窗容器
    '& .MuiDialog-paper': {
      maxWidth: '90vw',
      margin: '16px',
      padding: '8px'
    },
    // 调整日历头部
    '& .MuiPickersCalendarHeader-root': {
      padding: '4px 8px',
      fontSize: '0.875rem'
    },
    // 调整日期单元格大小
    '& .MuiPickersDay-day': {
      width: '32px',
      height: '32px',
      fontSize: '0.875rem'
    },
    // 调整时间选择器区域
    '& .MuiPickersTimePicker-root': {
      padding: '8px',
      '& .MuiButton-root': {
        minWidth: '32px',
        padding: '4px'
      }
    }
  }}
/>

用styled组件封装响应式样式 #

import { styled } from '@mui/material/styles';
import { DesktopDateTimePicker } from '@mui/x-date-pickers';

const MobileFriendlyDesktopPicker = styled(DesktopDateTimePicker)(({ theme }) => ({
  [theme.breakpoints.down('sm')]: {
    '& .MuiDialog-paper': {
      width: '95vw',
      maxWidth: '95vw',
      margin: theme.spacing(1)
    },
    '& .MuiPickersLayout-root': {
      flexDirection: 'column',
      gap: theme.spacing(1)
    },
    '& .MuiPickersCalendar-root': {
      minHeight: '240px'
    },
    '& .MuiTypography-root': {
      fontSize: '0.875rem'
    }
  }
}));

// 使用封装后的组件
<MobileFriendlyDesktopPicker
  label="选择日期时间"
  value={selectedDateTime}
  onChange={setSelectedDateTime}
/>

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