Question

我使用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>

</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-loader依次修改作用域css中的选择器，以显式匹配组件内部的元素，而外部没有任何内容。

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

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

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

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

Vuetife覆盖组件作用域样式

1 个答案: