如何在Material UI Date Picker中为特定日期（如法定节假日）设置样式？

嘿，这个需求其实在Material UI Date Picker里很好实现，核心是利用自定义日期渲染函数来判断目标日期并应用样式。我根据主流的MUI版本给你拆解步骤：

一、准备你的节假日数据 #

首先把需要特殊样式的日期整理成列表，如果你需要不同日期用不同样式，也可以把样式配置一起存进去：

// 基础版：仅日期列表
const holidays = [
  new Date(2024, 0, 1), // 元旦
  new Date(2024, 1, 10), // 春节
  // 更多节假日...
];

// 进阶版：带自定义样式的日期列表
const holidaysWithStyles = [
  { date: new Date(2024, 0, 1), style: { backgroundColor: "#ffcccc", color: "#d32f2f" } },
  { date: new Date(2024, 1, 10), style: { backgroundColor: "#e3f2fd", color: "#1976d2" } },
];

二、MUI v5+（@mui/x-date-pickers）实现方法 #

MUI v5的Date Picker使用slotProps来自定义各个组件，我们需要针对day slot配置renderDay函数：

方法1：统一样式的节假日 #

先自定义一个带样式的Day组件，再通过渲染函数判断应用：

import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { Day } from "@mui/x-date-pickers/Day";
import { styled } from "@mui/material/styles";

// 自定义节假日日期的样式组件
const HolidayDay = styled(Day)(({ theme }) => ({
  backgroundColor: theme.palette.error.light,
  color: theme.palette.common.white,
  "&:hover": {
    backgroundColor: theme.palette.error.main,
    color: theme.palette.common.white,
  },
}));

// 判断日期是否为节假日的工具函数
const isHoliday = (date) => {
  return holidays.some(holiday => 
    holiday.getDate() === date.getDate() &&
    holiday.getMonth() === date.getMonth() &&
    holiday.getFullYear() === date.getFullYear()
  );
};

// 在DatePicker中配置
<DatePicker
  label="选择日期"
  slotProps={{
    day: {
      renderDay: (date, selectedDate, dayProps) => {
        // 如果是节假日，渲染自定义样式的Day组件，否则用默认组件
        return isHoliday(date) ? <HolidayDay {...dayProps} /> : <Day {...dayProps} />;
      },
    },
  }}
/>

方法2：不同节假日用不同样式 #

如果每个节假日需要独特样式，可以在渲染函数中动态获取样式并应用：

import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { Day } from "@mui/x-date-pickers/Day";

// 获取对应日期的自定义样式
const getHolidayStyle = (date) => {
  const matchedHoliday = holidaysWithStyles.find(item => 
    item.date.getDate() === date.getDate() &&
    item.date.getMonth() === date.getMonth() &&
    item.date.getFullYear() === date.getFullYear()
  );
  return matchedHoliday?.style || {};
};

<DatePicker
  label="选择日期"
  slotProps={{
    day: {
      renderDay: (date, selectedDate, dayProps) => {
        const customStyle = getHolidayStyle(date);
        // 把自定义样式合并到组件的sx属性中
        return <Day {...dayProps} sx={{ ...customStyle }} />;
      },
    },
  }}
/>

三、MUI v4版本实现方法 #

如果你还在使用MUI v4的Date Picker，直接给组件传入renderDay prop即可：

import { DatePicker } from "@material-ui/pickers";
import { Button } from "@material-ui/core";

<DatePicker
  label="选择日期"
  renderDay={(date, selectedDate, dayInCurrentMonth) => {
    // 过滤掉非当前月份的日期
    if (!dayInCurrentMonth) return null;
    
    const isHoliday = holidays.some(holiday => 
      holiday.getDate() === date.getDate() &&
      holiday.getMonth() === date.getMonth() &&
      holiday.getFullYear() === date.getFullYear()
    );

    // 根据是否为节假日返回不同样式的按钮
    return (
      <Button
        variant={isHoliday ? "contained" : "text"}
        color={isHoliday ? "error" : "default"}
        size="small"
      >
        {date.getDate()}
      </Button>
    );
  }}
/>

注意事项 #

• 时区问题：比较日期时建议统一使用UTC时间，避免本地时区差异导致判断错误。比如可以把日期转换为UTC时间后再比较：

  const isHoliday = (date) => {
    const targetDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    return holidays.some(holiday => {
      const holidayUTC = new Date(Date.UTC(holiday.getFullYear(), holiday.getMonth(), holiday.getDate()));
      return targetDate.getTime() === holidayUTC.getTime();
    });
  };
  

• 样式优先级：如果自定义样式不生效，可以检查是否被组件默认样式覆盖，尝试用!important或者调整styled组件的优先级。

这样就能轻松给指定日期加上你想要的样式啦～

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