如何为Material UI DatePicker组件的单个日期元素添加自定义类

解决方法 #

你可以通过DatePicker内置的renderDay属性实现单个日期的自定义类添加，这个属性支持自定义渲染每一个日期单元格，具体操作如下：

1. 先定义自定义日期渲染函数，在函数内可以按你的业务规则判断对应日期是否需要添加特殊类名

// 示例：给每月15号的非跨月日期添加自定义类
const renderCustomDay = (date, selectedDate, dayInCurrentMonth, dayComponent) => {
  // 自定义判断逻辑，可替换为你自己的条件，比如匹配特定日期区间、节假日等
  const needCustomClass = date.getDate() === 15 && dayInCurrentMonth;
  // 克隆原有日期组件，追加自定义类名
  return React.cloneElement(dayComponent, {
    className: needCustomClass ? 'your-custom-class-name' : '',
    // 也可在此处追加其他自定义props，比如自定义点击事件、禁用状态等
  });
};

2. 给你的DatePicker组件添加renderDay属性，绑定上面写好的自定义渲染函数即可

<DatePicker
  // 保留你原有所有属性不变，新增下面这一行
  renderDay={renderCustomDay}
  // 原有其他属性...
/>

补充说明 #

• 如果你的项目已经升级到MUI v5及以上版本的DatePicker（归属MUI X组件库），对应的自定义日期插槽属性改为slots.day，用法逻辑一致，只需将自定义的日期组件传入该属性即可。
• 自定义类名如果是使用CSS Modules/InjectSheet等方案，直接替换为你定义在classes对象中的对应变量即可。

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