在选定的日期中为反应日期添加 raduis (airBnB)

Question

我正在使用 react-dates 来实现以下日期范围选择器：

这是我所做的： https://codesandbox.io/s/ecstatic-almeida-3u72o?fontsize=14&hidenavigation=1&theme=dark 但我仍然无法将所选样式应用到所选日期的边界半径之外（我之前尝试过并且经常尝试创建自定义内容单元格以应用背景样式但它不起作用）任何人都可以帮助我，请这是我面临的问题的屏幕截图：

Answer 1

您到底遇到了什么问题？

使 css 规则适用或使规则与屏幕截图设计完全一样？

如果是第二个，我会做这样的事情：

.CalendarDay__selected {
  border: none;
}

.CalendarDay__selected_start,
.CalendarDay__selected_end {
    border-radius: 50%;
    position: relative;
    z-index: 0;
  
  &:before {
    display: block;
    position: absolute;
    content: '';
    left: 50%;
    right: 0;
    bottom: 0;
    top: 0;
    background: #66e2da;
    z-index: -1;
  }
  
  &:after {
    display: block;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #00a699;
    z-index: -1;
    border-radius: 50%;
  }
}

.CalendarDay__selected_span {
  border: none;
}

.CalendarDay__selected_span:last-of-type {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.CalendarDay__selected_span:first-of-type {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

在选定的日期中为反应日期添加 raduis (airBnB)

add raduis in selected dates for react-dates (airBnB)

css

react-dates