Css Vis.js组背景样式

我在Angular5项目中有一个Vis.js时间表，其中有三个组，每个组中有多个项目/事件。我想出了如何分别设置每组背景的样式，以使交替的泳道更加清晰，方法是：

.vis-background>.vis-group:nth-of-type(even) { 
    // there is an auto-generated empty group as the first .vis-group, so starting with the 2nd group
  background-color: $gray-lighter;
}

.vis-labelset>.vis-label:nth-of-type(odd) {
  background-color: $gray-lighter;
}

---

但是，垂直背景网格线在灰色组中不再可见。这就好像组背景色分层在网格线的顶部。如果我添加一个

z-index:1

到

.vis vertical

或

到.vis grid

行和组颜色显示正确，但我失去了时间轴缩放和移动功能。如何将样式应用于组、保持垂直网格线可见以及保持所有时间轴功能

我使用的一种解决方法并没有解决问题，但使其不那么臭名昭著，它是这样定义组的：

group=
{
    id : 0,
    content : 'My Group',
    style : "background: rgba(82, 226, 233, 0.2);"
};

并定义如下的背景项

background_item=
{
    group : 0,
    start : '2018-10-29 00:00',
    end : '2018-10-30 02:00',
    type : 'background',
    className : 'myClassName'
};

类名来自此样式的位置：

.vis-item.vis-background.myClassName {
    background-color: rgba(82, 226, 233, 0.2);
}

它使用透明度来防止隐藏垂直线

结果是这样的：

group=
{
    id : 0,
    content : 'My Group',
    style : "background: rgba(82, 226, 233, 0.2);"
};

希望在有人找到最终解决方案的时候能有所帮助