如何调整MUI X Date Picker头部元素的显示顺序？

方案一：自定义CalendarHeader组件（最灵活可控） #

直接替换默认头部组件，完全按需求排列元素：

1. 导入所需基础组件与图标
2. 编写自定义头部组件，按「左箭头-年月标题-右箭头」的顺序布局
3. 在DatePicker的components属性中指定自定义组件

import { DatePicker, LocalizationProvider, AdapterDateFns } from '@mui/x-date-pickers';
import { CalendarHeader } from '@mui/x-date-pickers/CalendarHeader';
import IconButton from '@mui/material/IconButton';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import Typography from '@mui/material/Typography';

const CustomCalendarHeader = (props) => {
  const { date, decreaseMonth, increaseMonth } = props;

  return (
    <CalendarHeader {...props}>
      <IconButton onClick={decreaseMonth} size="small">
        <ChevronLeftIcon />
      </IconButton>
      <Typography variant="h6" sx={{ marginX: 2 }}>
        {new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: 'long' }).format(date)}
      </Typography>
      <IconButton onClick={increaseMonth} size="small">
        <ChevronRightIcon />
      </IconButton>
    </CalendarHeader>
  );
};

// 组件使用示例
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    label="选择日期"
    components={{ CalendarHeader: CustomCalendarHeader }}
  />
</LocalizationProvider>

方案二：CSS布局调整（快速实现） #

若不想自定义组件，可通过修改默认头部的flex布局顺序实现，精准定位元素类名调整order属性：

/* 重置头部的flex布局 */
.MuiPickersCalendarHeader-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 调整各元素的排列顺序 */
.MuiPickersCalendarHeader-previousIconButton {
  order: 1;
}
.MuiPickersCalendarHeader-labelContainer {
  order: 2;
  flex-grow: 1;
  text-align: center;
}
.MuiPickersCalendarHeader-nextIconButton {
  order: 3;
}

关于你之前尝试失败的原因 #

PrivatePickersFadeTransitionGroup是月份切换的动画容器，修改它的样式无法影响元素布局；直接修改MuiPickersCalendarHeader根类名不够精准，需要定位到箭头按钮和标题容器的具体类名，调整flex的order属性才能改变排列顺序。

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