vue中的时间轴可视化visjs：-无法通过实用地将背景不同的颜色应用于vis-item-box

Question

我正在Vue中使用visjs使用时间轴可视化。我想通过实用地更改项目框的动态颜色。我确实尝试应用新的CSS，但是无法成功。我确实为两种颜色创建了单独的CSS类，一种是绿色，另一种是红色，但是当我运行此程序时，它不会覆盖现有的CSS类.vis-item。

enter image description hereVuejs框架和visjs

下面是我的代码，

<script>
import { Timeline } from 'vue2vis';
import "vue2vis/dist/vue2vis.css";
import moment  from 'moment';
export default {
    name: 'TimelineVisu',
    components:{
        Timeline
    },
    data() {
            return {
                    groups: [],
                    items: [],
                    options: {
                    editable: false,
                    tooltip: {followMouse: true}
                        }                       
        }
    },
   created() {
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    var groupCount = 3;
    var itemCount = 20;
    // create a data set with groups
    var names = ['John', 'Alston', 'Lee', 'Grant'];
    for (var g = 0; g < groupCount; g++) {
      this.groups.push({
        id: g,
        content: names[g]
      });
    }
    // create a dataset with items
    for (var i = 0; i < itemCount; i++) {
      var start = now.clone().add(Math.random() * 200, 'hours');
      var group = Math.floor(Math.random() * groupCount);
      this.items.push({
        id: i,
        group: group,
        content: 'item ' + i +
          ' <span class="" style="color:green;">(' + names[group] + ')</span> <br/> vinod',
        start: start,
        type: 'box',
        className: 'green', //green or yellow
        title:'Testing tool tip index' + i     
      });
    }
   }
}
</script>

<style scoped>

.yellow {
    background-color: red !important;   
  }

.green {
    background-color: green !important;   
  }
 

</style>

<template>
    <div>
      
      <timeline ref="timeline"
    :items="items"
    :groups="groups"
    :options="options"
    >
    </timeline>
    </div>
</template>

Answer 1

尝试使用/deep/或::v-deep来实现子组件模板（html）

/deep/ .classname{
    your css 
}

或

::v-deep .classname{
    your css    
}

参考：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors