Vue.js Vuetife覆盖组件范围的样式

我使用Vuetify创建了一个应用程序。一个组件应显示使用dxhtmlScheduler创建的明细表。但全局Vuetify样式将覆盖本地dxhtmlScheduler样式，因此无法正确显示明细表。如何使dxhtmlScheduler样式成为比样式Vuetify具有更高优先级的特定组件

<template >

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
  <div class="dhx_cal_prev_button">&nbsp;</div>
  <div class="dhx_cal_next_button">&nbsp;</div>
  <div class="dhx_cal_today_button"></div>
  <div class="dhx_cal_date"></div>
  <div class="dhx_cal_tab" name="day_tab"></div>
  <div class="dhx_cal_tab" name="week_tab"></div>
  <div class="dhx_cal_tab" name="month_tab"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>

导入“dhtmlx调度程序”
导出默认值{
名称：“调度程序”，
安装的（）{
init（“scheduler_here”）；
}
}
@导入“../../node_modules/dhtmlx scheduler/codebase/dhtmlx scheduler_material.css”；

dhtmlxScheduler生成的标记位于vue组件范围之外，因此我认为范围样式无法与之配合使用

尝试从样式声明中删除

范围
属性

<style>
    @import "../../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>


@导入“../../node_modules/dhtmlx scheduler/codebase/dhtmlx scheduler_material.css”；

下面是一个相关的github问题

说明：

Vue向组件创建的html元素添加一个特殊的
data-v-xxxxxxx
属性

Vue css加载器依次修改作用域css中的选择器，以便显式匹配组件内部的元素，而不匹配组件外部的元素

因此，当加载到页面时，dhtmlscheduler.css中的
.dhx_-cal_-event_-line{backtrond:blue；}
变为
.dhx_-cal_-event_-line[data-v-xxxxxxx]{backtrond:blue；}
。这种样式应该只影响匹配值为
data-v
属性的组件

问题是，dhtmlxscheduler的DOM元素是由vue组件知识之外的库代码创建的，它们没有vue
data-v-xxxxxxx
属性，因此作用域css选择器不再匹配它们

因此，您必须将调度器css作为全局样式加载

也许有更好的解决办法，但不幸的是，我不知道

<style>
    @import "../../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>