NextJS中CSS Modules覆盖Ant Design日历今日高亮样式问题

核心问题 #

你遇到的border: unset不生效，本质是CSS Modules的作用域机制和选择器权重问题：

1. CSS Modules默认会将局部类名哈希化，但Ant Design的.ant-picker-cell-in-view等类是全局类，如果你直接在Component.module.css里写这些类名，它们会被转换成哈希后的无效类，导致选择器匹配不到目标元素。
2. 即使匹配到，Ant Design原始选择器的权重（多层类嵌套）也可能高于你的自定义样式，导致样式被覆盖。

解决步骤 #

在Component.module.css中，使用:global()包裹Ant Design的全局类，同时保证选择器层级足够：

/* Component.module.css */
.todayNoHighlight :global(.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before) {
  border: unset;
}

原理说明 #

• .todayNoHighlight会被CSS Modules处理为局部哈希类，确保样式只作用于你添加了该类的Calendar组件。
• :global()内的类名不会被哈希化，能正确匹配Ant Design的全局类，保证选择器指向今日日期的伪元素。
• 该选择器的权重和Ant Design原始选择器一致，能成功覆盖原始边框样式。

验证方法 #

打开浏览器开发者工具，查看今日日期元素的样式面板：

• 检查你的自定义样式是否出现在样式列表中，如果没有，说明选择器匹配错误，检查:global()的使用是否正确。
• 如果样式存在但被划掉，说明权重不足，可以尝试在选择器前加上组件的根类（比如你的页面容器类）进一步提升权重，或者临时用!important验证（不推荐长期使用）。

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