如何阻止Ant Calendar首次渲染时默认给当天添加选中类名

问题核心 #

• Ant Calendar 首次加载时，会默认给当天日期单元格添加.ant-fullcalendar-selected-day类名
• 直接通过CSS覆盖该类样式的方案存在缺陷：该类是所有日期选中状态的通用类，全局覆盖会导致用户后续点击选日期时，选中样式完全失效
• 目标：仅清除首次加载时当天默认自带的选中状态，不破坏后续日期选择的正常交互

可落地方案 #

方案1：受控模式初始值置空（优先推荐） #

这是侵入性最低、实现最简单的方案，完全基于组件原生API实现，不需要额外操作DOM：

• 用受控模式绑定Calendar的选中值，初始状态将value设为null，不要默认传入当天的moment对象，组件会正常渲染当前月视图，但不会出现默认选中的日期
• 监听onSelect事件，当用户主动点击选择日期时，再将绑定的选中值更新为用户选择的日期，后续选中交互和样式完全不受影响
  参考代码：

import { Calendar } from 'antd';
import { useState } from 'react';

export default function CustomCalendar() {
  // 初始值设为null，不触发默认选中当天的逻辑
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateSelect = (date) => {
    setSelectedDate(date);
    // 此处补充业务侧日期选择后的自定义逻辑
  };

  return <Calendar value={selectedDate} onSelect={handleDateSelect} />;
}

方案2：自定义单元格渲染过滤初始选中类 #

如果业务逻辑要求必须初始化传入默认日期值，可以通过自定义单元格渲染的方式，精准区分默认选中和用户主动选中的状态：

• 用一个不需要触发重渲染的ref变量，标记是否已经发生过用户主动选择日期的行为，初始值为false
• 通过fullCellRender属性自定义单元格外层渲染逻辑：如果还未发生用户主动选择，且当前遍历的单元格日期为当天，就把类名里的.ant-fullcalendar-selected-day移除
• 当用户触发onSelect事件时，把ref的标记位改为true，后续选中逻辑完全走原生逻辑，不会影响正常交互
  参考代码：

import { Calendar } from 'antd';
import { useRef, useState } from 'react';
import moment from 'moment';

export default function CustomCalendar() {
  // 标记是否为用户主动选择
  const hasUserSelected = useRef(false);
  const [selectedDate, setSelectedDate] = useState(moment());

  const handleDateSelect = (date) => {
    hasUserSelected.current = true;
    setSelectedDate(date);
    // 此处补充业务侧日期选择后的自定义逻辑
  };

  const fullCellRender = (date, info) => {
    let className = info.className;
    // 非用户主动选择阶段，移除当天默认的选中类
    if (!hasUserSelected.current && date.isSame(moment(), 'day')) {
      className = className.replace('ant-fullcalendar-selected-day', '').trim();
    }
    return (
      <div className={className}>
        {/* 此处补充自定义单元格内容渲染逻辑 */}
        {date.date()}
      </div>
    );
  };

  return (
    <Calendar
      value={selectedDate}
      onSelect={handleDateSelect}
      fullCellRender={fullCellRender}
    />
  );
}

避坑提示：不要使用全局CSS覆盖.ant-fullcalendar-selected-day样式的方案，该类是组件选中状态的通用标识，全局覆盖会导致所有选中场景的样式失效，直接破坏日期选择功能。

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