React Day Picker 日期单元格/月边距与月份及表头边框添加求助

我帮你搞定这两个样式需求！直接通过自定义CSS覆盖组件默认样式就能实现，具体操作如下：

1. 为日期单元格/月主体添加边距 #

首先给你的DayPicker组件添加一个自定义类名，方便精准控制样式：

<DayPicker className="custom-day-picker" /* 其他props */ />

然后编写CSS来设置边距：

/* 给整个月主体区域添加内边距，同时控制多月份之间的间距 */
.custom-day-picker .rdp-months {
  padding: 1.5rem;
  gap: 3rem; /* 月份之间的水平间距 */
}

/* 给单个日期单元格添加外边距，实现单元格之间的空隙 */
.custom-day-picker .rdp-day {
  margin: 0.3rem;
}

这里的rdp-months是组件默认的多月份容器类名，rdp-day是单个日期单元格的类名，通过这些类可以直接修改样式。

2. 在两个月份之间以及表头之间添加边框 #

同样基于上面的自定义类名，添加边框样式：

/* 给每个月份容器添加右边框，实现月份之间的分隔线 */
.custom-day-picker .rdp-month {
  border-right: 1px solid #d1d5db;
  padding-right: 3rem; /* 避免内容紧贴边框 */
}

/* 去掉最后一个月份的右边框，避免多余线条 */
.custom-day-picker .rdp-month:last-child {
  border-right: none;
  padding-right: 0;
}

/* 给表头添加底部边框，区分表头和日期区域 */
.custom-day-picker .rdp-header {
  border-bottom: 1px solid #d1d5db;
  padding-bottom: 0.8rem;
}

/* 如果需要表头之间也对应月份的竖边框，添加下面的样式 */
.custom-day-picker .rdp-month:not(:last-child) .rdp-header {
  border-right: 1px solid #d1d5db;
  padding-right: 3rem;
}

你可以根据设计需求调整边框的颜色、宽度，以及边距的数值，让样式完全匹配你的设计稿。如果对组件的默认类名不确定，用浏览器的开发者工具查看元素就能找到对应的类啦～

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