Antd日期选择器CSS样式定制问题求助

以下是针对你遇到的4个样式问题的具体修复方案，结合修改后的完整CSS代码：

问题修复细节 #

1. 消除起始/结束日期与中间范围的蓝色背景断层 #

Antd默认会给选中的起始/结束单元格添加蓝色背景，直接覆盖该背景色并去掉默认边框，确保与中间范围视觉衔接：

.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background-color: green !important;
  border: none !important;
}

2. 消除选中行之间的白色间隙 #

默认中间范围的背景层有上下边距，将其高度扩展至单元格全高即可消除间隙：

.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
  background-color: purple;
  top: 0;
  bottom: 0;
}

3. 将范围选择时的蓝色虚线改为紫色 #

修改鼠标拖拽选择时的预览虚线边框和背景色：

/* 自定义预览状态的虚线边框 */
.ant-picker-cell-in-view.ant-picker-cell-preview .ant-picker-cell-inner {
  border-color: purple !important;
}
/* 预览范围的背景层改为浅紫色 */
.ant-picker-cell-in-view.ant-picker-cell-preview::before {
  background-color: rgba(128, 0, 128, 0.2) !important;
}

4. 关闭重开后，悬停选中范围显示紫色 #

添加悬停状态下的范围样式覆盖，确保重新打开后样式生效：

/* 悬停范围的背景样式 */
.ant-picker-cell-in-view.ant-picker-cell-hover-in-range::before {
  background-color: purple !important;
}
/* 悬停时的起始/结束单元格背景同步 */
.ant-picker-cell-in-view.ant-picker-cell-range-start-hover .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-end-hover .ant-picker-cell-inner {
  background-color: green !important;
  border: none !important;
}

完整修改后的CSS代码 #

p.ant-picker-panels > *:first-child button.ant-picker-header-next-btn {
  visibility: visible !important;
}

.ant-picker-panels > *:first-child button.ant-picker-header-super-next-btn {
  visibility: visible !important;
}

.ant-picker-panel-container,
.ant-picker-footer {
  width: 280px !important;
}

.ant-picker-footer-extra > div {
  flex-wrap: wrap !important;
}

.ant-picker-active-bar {
  display: none;
}

/* 起始/结束单元格样式 */
.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner {
  background-color: green !important;
  border-top-left-radius: 32px !important;
  border-bottom-left-radius: 32px !important;
  border: none !important;
}

.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background-color: green !important;
  border-top-right-radius: 32px !important ;
  border-bottom-right-radius: 32px !important;
  border-top-left-radius: unset !important;
  border-bottom-left-radius: unset !important;
  border: none !important;
}

/* 中间范围背景铺满单元格 */
.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
  background-color: purple;
  top: 0;
  bottom: 0;
}

/* 范围选择预览虚线样式 */
.ant-picker-cell-in-view.ant-picker-cell-preview .ant-picker-cell-inner {
  border-color: purple !important;
}

.ant-picker-cell-in-view.ant-picker-cell-preview::before {
  background-color: rgba(128, 0, 128, 0.2) !important;
}

/* 重开后悬停范围样式 */
.ant-picker-cell-in-view.ant-picker-cell-hover-in-range::before {
  background-color: purple !important;
}

.ant-picker-cell-in-view.ant-picker-cell-range-start-hover .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-end-hover .ant-picker-cell-inner {
  background-color: green !important;
  border: none !important;
}

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