Vuetife覆盖组件范围的样式

Question

我使用Vuetify创建了一个应用程序。一个组件应该显示使用dxhtmlScheduler创建的计划。但是全局Vuetify样式覆盖本地dxhtmlScheduler样式，因此调度不能正确显示。如何使dxhtmlScheduler样式成为一个特定的组件，比styles具有更高的优先级？

<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>

​

</template>

<script>
import 'dhtmlx-scheduler'


export default {
name: "Scheduler",
mounted() {
  scheduler.init("scheduler_here");
   }
}
</script>

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

Answer 1

dhtmlxScheduler生成的标记位于vue组件作用域之外，因此我不认为作用域样式会与它一起工作。

尝试从样式声明中删除scoped属性

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

下面是一个相关的github问题https://github.com/vuejs/vue-loader/issues/559

解释

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

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

因此，当加载到页面时，.dhx_cal_event_line { background: blue; }在dhtmlscheduler.css中变成了.dhx_cal_event_line[data-v-xxxxxxx] { backtround: blue; }。这样的样式应该只影响具有data-v属性匹配值的组件。

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

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

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