更改反应大日历中的行样式答案

【问题标题】：change style of row in react big calendar更改反应大日历中的行样式
【发布时间】：2020-02-09 20:47:18
【问题描述】：

我需要制作一个包含事件的日历，我决定使用 react-big-calendar。但我需要制作不同风格的行。所以每一行应该在我用时隙完成的 30 分钟内完成，但我还需要删除默认边框并在每四行周围制作新边框。我怎样才能改变风格？

【问题讨论】：

标签： javascript css reactjs calendar react-big-calendar

【解决方案1】：

我在npmjs.org 网站上找不到任何信息...由于 div 是动态创建的，我们可以使用 CSS 来获得这种效果；

相关CSS：

.rbc-timeslot-group:nth-child(1), .rbc-timeslot-group:nth-child(2), .rbc-timeslot-group:nth-child(3), .rbc-timeslot-group:nth-child(23), .rbc-timeslot-group:nth-child(24)
{ background-color: lightpink; }

样本working stackblitz here

【讨论】：

谢谢Akber，我如何在这四个元素周围设置边框，它应该适用于每4行。
你为什么选择23,34号孩子？？
嗨哈米德，我选择了几行来表示下班时间......如果你来自南亚，那就是真的;-)

【解决方案2】：

感谢@akber-iqbal 我找到了答案，所以这些样式对我有用，如果您可以优化它，您可以分享它，谢谢。

 .rbc-day-slot .rbc-time-slot {
  border: unset;
}
.rbc-timeslot-group:nth-child(4n+1),
.rbc-timeslot-group:nth-child(4n+2),
.rbc-timeslot-group:nth-child(4n+3),
.rbc-timeslot-group:nth-child(4n+4)
 {  /* or 4n+1 */
  background-color: #fefefe;
  border-width:0px; 
  margin:0;
  padding:0;
  border-color:black;
}


.rbc-timeslot-group:nth-child(4n+1)
 { border-top: 1px solid #ccc;
}

见https://stackblitz.com/edit/big-calendar-demo-jv11jb

【讨论】：