如何修改MUI StaticDatePicker周行背景色：区分当前周与过去周

完全可以通过覆盖MUI的CSS类+自定义日期判断逻辑实现需求，以下是具体步骤：

方法一：自定义CSS类+DOM操作标记周行 #

1. 基础组件结构 #

先搭建StaticDatePicker的基础框架，添加自定义类名方便样式隔离：

import { useState, useEffect, useRef } from 'react';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import './CustomDatePicker.css';

const CustomDatePicker = () => {
  const pickerRef = useRef(null);
  const [displayMonth, setDisplayMonth] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StaticDatePicker
        ref={pickerRef}
        className="custom-static-date-picker"
        displayMonth={displayMonth}
        onMonthChange={setDisplayMonth}
        // 按需添加其他属性（如value、onChange）
      />
    </LocalizationProvider>
  );
};

export default CustomDatePicker;

2. 编写自定义样式 #

在CustomDatePicker.css中定义过去周和当前周的背景样式：

/* 过去周的背景色（橙色半透明） */
.custom-static-date-picker .MuiCalendarWeek-root.past-week::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 165, 0, 0.2);
  z-index: -1;
}

/* 当前周的背景色（蓝色半透明） */
.custom-static-date-picker .MuiCalendarWeek-root.current-week::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 123, 255, 0.2);
  z-index: -1;
}

/* 给周行添加相对定位，确保伪元素正确显示 */
.custom-static-date-picker .MuiCalendarWeek-root {
  position: relative;
}

3. 添加周行判断逻辑 #

通过useEffect监听月份变化，给对应周行添加标记类：

useEffect(() => {
  const pickerElement = pickerRef.current;
  if (!pickerElement) return;

  const weekRows = pickerElement.querySelectorAll('.MuiCalendarWeek-root');
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  // 计算当前周的起始（此处以周日为一周起始，可按需改为周一）
  const startOfCurrentWeek = new Date(today);
  startOfCurrentWeek.setDate(today.getDate() - today.getDay());
  const endOfCurrentWeek = new Date(startOfCurrentWeek);
  endOfCurrentWeek.setDate(endOfCurrentWeek.getDate() + 6);

  weekRows.forEach(row => {
    // 清除之前的类标记
    row.classList.remove('past-week', 'current-week');

    const dateCells = row.querySelectorAll('.MuiPickersDay-root');
    let isCurrentWeek = false;
    let hasFutureDate = false;

    dateCells.forEach(cell => {
      const dateLabel = cell.getAttribute('aria-label');
      if (!dateLabel) return;
      const cellDate = new Date(dateLabel);
      cellDate.setHours(0, 0, 0, 0);

      // 判断是否属于当前周范围
      if (cellDate >= startOfCurrentWeek && cellDate <= endOfCurrentWeek) {
        isCurrentWeek = true;
      }
      // 判断是否包含未来日期
      if (cellDate > today) {
        hasFutureDate = true;
      }
    });

    // 标记当前周
    if (isCurrentWeek) {
      row.classList.add('current-week');
    } 
    // 标记过去的周（无未来日期且不是当前周）
    else if (!hasFutureDate) {
      row.classList.add('past-week');
    }
  });
}, [displayMonth]);

方法二：使用MUI Styled组件封装 #

如果习惯用MUI的styledAPI，可以直接封装组件：

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

const StyledStaticDatePicker = styled(MuiStaticDatePicker)(({ theme }) => ({
  '& .MuiCalendarWeek-root': {
    position: 'relative',
    '&.past-week::before': {
      content: '""',
      position: 'absolute',
      inset: 0,
      backgroundColor: 'rgba(255, 165, 0, 0.2)',
      zIndex: -1,
    },
    '&.current-week::before': {
      content: '""',
      position: 'absolute',
      inset: 0,
      backgroundColor: 'rgba(0, 123, 255, 0.2)',
      zIndex: -1,
    },
  },
}));

之后使用StyledStaticDatePicker替代原组件，再添加上述的周行判断逻辑即可。

注意事项 #

• 周起始日（周一/周日）可根据需求调整startOfCurrentWeek的计算逻辑；
• 时区敏感场景需额外处理日期转换，确保判断逻辑准确；
• 切换月份时通过onMonthChange触发重新计算，避免样式失效。

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