React Calendar生产环境CSS Modules高亮日期失效问题求助

核心问题分析 #

从你贴的代码来看，大概率是日期格式化不统一导致的匹配失败：
你的workoutDays数组是'dd-mm-yyyy'固定格式，但date.toLocaleDateString()的输出完全依赖运行环境的语言/区域配置——开发和生产环境的Node.js/浏览器区域设置可能存在差异，导致生产环境下格式化后的日期和数组内的格式不匹配，自然不会返回styles.highlight类，高亮功能也就失效了。

解决方案 #

1. 统一日期格式化逻辑 #

放弃依赖环境的toLocaleDateString()，自己实现一个稳定的格式化函数，确保输出和workoutDays的格式完全对齐：

// 自定义日期格式化：将Date对象转为'dd-mm-yyyy'格式
const formatToDDMMYYYY = (date) => {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1补正
  const year = date.getFullYear();
  return `${day}-${month}-${year}`;
};

// 修改Calendar组件的tileClassName逻辑
<Calendar
  value={date} 
  onChange={handleOnchangeDate} 
  onClickDay={value => handleSelectDay(value)}
  tileClassName={({ date, view }) => {
    const formattedDate = formatToDDMMYYYY(date);
    return props.workoutDays.includes(formattedDate) ? styles.highlight : undefined;
  }} 
/>

这里用includes替代find，逻辑更简洁，性能也更优。

2. 验证CSS Modules生产环境配置 #

如果日期匹配问题解决后仍失效，检查构建工具的CSS Modules配置：

• Webpack环境：确保css-loader在生产环境开启了modules选项，类名哈希规则和开发环境一致（或至少能正确映射）。
• Vite环境：确认css.modules配置没有在生产环境被意外覆盖，比如是否开启了localsConvention导致类名转换异常。

3. CSS-in-JS失效的补充排查 #

如果之前尝试CSS-in-JS没效果，可能是样式未正确作用到Calendar的tile元素：

• 比如用styled-components时，要确认样式是针对Calendar的tile节点（可通过浏览器开发者工具查看元素类名，验证样式是否被正确注入）。
• 可以临时用行内样式测试是否生效，排除日期匹配问题：

tileStyle={({ date, view }) => {
  const formattedDate = formatToDDMMYYYY(date);
  return props.workoutDays.includes(formattedDate) ? { backgroundColor: '#ff0000' } : {};
}}

如果行内样式生效，说明是CSS-in-JS的样式注入问题；否则还是日期匹配的核心问题。

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