如何使用styled-components为AntD Calendar设置未来日期样式？

我正在React项目中使用AntD的Calendar组件和styled-components，现有基础组件如下：

import { Calendar } from "antd";
import styled from "styled-components";

const CustomCalendar = () => {
  const StyledCalendar = styled(Calendar)`
    .ant-picker-calendar-date {
      background: #f3faff !important;
      border: 1px solid #c6e2ee !important;
      margin: 0 !important;
    }

    .ant-picker-calendar-date-today {
      background: #c6e2ee !important;
    }
  `;

  return (
    <div>
      <StyledCalendar />
    </div>
  );
};

export default CustomCalendar;

当前呈现效果：

我想给今日之后的所有日期设置白色背景，尝试了以下写法但无效：

const StyledCalendar = styled(Calendar)
  .ant-picker-calendar-date {
      background: #f3faff !important;
      border: 1px solid #c6e2ee !important;
      margin: 0 !important;
    }
    ${({ date }) => {
      const currentDate = dayjs();
      const selectedDate = dayjs(date);
      if (selectedDate.isAfter(currentDate, 'day')) {
        return `
          background-color: #f00 !important;
          color: #fff;
        `;
      }
    }}
  }
;

const MyCalendar = () => {
  const date = dayjs();
  return <StyledCalendar date={date} />;
};

请问该如何解决？有没有可行的实现方法？

你的写法无效的核心原因是：styled-components的这种方式无法直接遍历Calendar的每个日期单元格并单独判断日期，StyledCalendar是对整个Calendar组件的样式封装，而非单个日期单元格。要实现需求，得借助AntD Calendar提供的dateCellRender自定义单元格渲染能力，结合styled-components处理样式。

具体实现步骤 #

1. 定义单个日期单元格的样式组件

import { Calendar } from "antd";
import styled from "styled-components";
import dayjs from "dayjs";

// 自定义日期单元格样式组件，根据传入的date判断背景色
const DateCell = styled.div`
  width: 100%;
  height: 100%;
  padding: 8px;
  background: ${props => {
    // 统一按日初时间比较，避免时分秒干扰判断
    const currentDay = dayjs().startOf('day');
    const cellDay = dayjs(props.date).startOf('day');
    
    if (cellDay.isAfter(currentDay)) {
      return '#ffffff'; // 未来日期设为白色背景
    } else if (cellDay.isSame(currentDay)) {
      return '#c6e2ee'; // 今日保持原有背景色
    }
    return '#f3faff'; // 其他日期用默认背景色
  }};
  border: 1px solid #c6e2ee;
  margin: 0;
`;

2. 在Calendar中使用dateCellRender渲染自定义单元格

const CustomCalendar = () => {
  // 自定义单元格渲染函数
  const dateCellRender = (date) => {
    return <DateCell date={date}>{date.date()}</DateCell>;
  };

  return (
    <div>
      <Calendar dateCellRender={dateCellRender} />
    </div>
  );
};

export default CustomCalendar;

3. 进阶优化（可选）
   如果需要保留AntD默认的交互效果（如选中、hover状态），或者调整日历全局样式，可以将Calendar整体用styled-components封装后再配合自定义单元格：

// 全局日历容器样式
const StyledCalendarWrapper = styled(Calendar)`
  .ant-picker-calendar-header {
    margin-bottom: 10px;
    font-weight: 500;
  }
`;

// 组件中使用
const CustomCalendar = () => {
  const dateCellRender = (date) => {
    return <DateCell date={date}>{date.date()}</DateCell>;
  };

  return (
    <div>
      <StyledCalendarWrapper dateCellRender={dateCellRender} />
    </div>
  );
};

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