Vuetify 覆盖组件范围样式答案

【问题标题】：Vuetife overwrite components scoped stylesVuetify 覆盖组件范围样式
【发布时间】：2019-06-10 18:37:14
【问题描述】：

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

【问题讨论】：

标签： vue.js vue-component vuetify.js dhtmlx-scheduler

【解决方案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 作为全局样式加载。

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

【讨论】：